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

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

const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
    const handleMouseDown = (e, id) => {
        if (e.button === 1) { // Middle mouse button
            e.preventDefault();
            onCloseTab(id);
        }
    };

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

    return (
        <Box sx={{
            borderBottom: 1,
            borderColor: 'divider',
            '& .MuiTabs-indicator': {
                backgroundColor: 'primary.main',
            }
        }}>
            <Tabs
                value={activeTab}
                onChange={handleChange}
                variant="scrollable"
                scrollButtons="auto"
                aria-label="tabs"
            >
                {/* Статические вкладки */}
                <StyledTab
                    label="Главная"
                    value="Главная"
                    onMouseDown={(e) => handleMouseDown(e, "Главная")}
                />
                <StyledTab
                    label="Визуализация"
                    value="Визуализация"
                    onMouseDown={(e) => handleMouseDown(e, "Визуализация")}
                />

                {/* Динамические вкладки */}
                {tabs.map((tab) => (
                    <StyledTab
                        key={tab.id}
                        label={
                            <Box sx={{ display: "flex", alignItems: "center" }}>
                                <span>{tab.title}</span>
                                <CloseIcon
                                    fontSize="small"
                                    sx={{
                                        ml: 1,
                                        cursor: "pointer",
                                        '&:hover': {
                                            color: 'error.main'
                                        }
                                    }}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onCloseTab(tab.id);
                                    }}
                                />
                            </Box>
                        }
                        value={tab.id}
                        onMouseDown={(e) => handleMouseDown(e, tab.id)}
                    />
                ))}
            </Tabs>
        </Box>
    );
};

export default CustomTabs;