import React from "react";
import { Tabs, Tab, Box, styled, Typography } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";

const StyledTab = styled(Tab)(({ theme }) => ({
    minHeight: 48,
    padding: theme.spacing(1, 2),
    textTransform: 'none',
    '&.Mui-selected': {
        color: theme.palette.primary.main,
        fontWeight: theme.typography.fontWeightMedium,
    },
    '&:focus-visible': {
        outline: `2px solid ${theme.palette.primary.main}`,
        outlineOffset: '-2px',
    },
}));

const TabLabel = ({ title, onClose }) => {
    return (
        <Box sx={{
            display: "flex",
            alignItems: "center",
            minWidth: 0 // Для корректного обрезания длинного текста
        }}>
            <Typography
                variant="body2"
                noWrap
                sx={{
                    maxWidth: 120,
                    textOverflow: 'ellipsis',
                    overflow: 'hidden'
                }}
            >
                {title}
            </Typography>
            <CloseIcon
                fontSize="small"
                sx={{
                    ml: 1,
                    cursor: "pointer",
                    flexShrink: 0,
                    '&:hover': {
                        color: 'error.main'
                    }
                }}
                onClick={onClose}
            />
        </Box>
    );
};

const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
    const handleMouseDown = (e, id) => {
        if (e.button === 1) { // Средняя кнопка мыши
            e.preventDefault();
            onCloseTab(id);
        }
    };

    const handleChange = (event, newValue) => {
        onTabClick(newValue);
    };

    // Статические вкладки (сохраняем оригинальные id)
    const staticTabs = [
        { id: "Главная", title: "Главная" },
        { id: "Визуализация", title: "Визуализация" }
    ];

    return (
        <Box sx={{
            borderBottom: 1,
            borderColor: 'divider',
            '& .MuiTabs-indicator': {
                backgroundColor: 'primary.main',
            }
        }}>
            <Tabs
                value={activeTab}
                onChange={handleChange}
                variant="scrollable"
                scrollButtons="auto"
                allowScrollButtonsMobile
                aria-label="tabs"
            >
                {/* Статические вкладки */}
                {staticTabs.map(tab => (
                    <StyledTab
                        key={`static_${tab.id}`} // Добавляем префикс для уникальности
                        label={tab.title}
                        value={tab.id} // Используем id как value
                        onMouseDown={(e) => handleMouseDown(e, tab.id)}
                    />
                ))}

                {/* Динамические вкладки */}
                {tabs.map((tab) => (
                    <StyledTab
                        key={`dynamic_${tab.id}`} // Добавляем префикс для уникальности
                        label={
                            <TabLabel
                                title={tab.title}
                                onClose={(e) => {
                                    e.stopPropagation();
                                    onCloseTab(tab.id);
                                }}
                            />
                        }
                        value={tab.id}
                        onMouseDown={(e) => handleMouseDown(e, tab.id)}
                    />
                ))}
            </Tabs>
        </Box>
    );
};

export default CustomTabs;