import React, { useState } from "react";
import {
    Drawer,
    List,
    Typography,
    styled,
    IconButton,
    Tooltip,
    Box
} from "@mui/material";
import {
    ChevronLeft,
    ChevronRight,
    Menu as MenuIcon
} from "@mui/icons-material";
import MenuItem from "./SidebarMenuComponents/MenuItem";
import SidebarFooter from "./SidebarMenuComponents/SidebarFooter";

const SidebarResizer = styled('div')(({ theme }) => ({
    width: "5px",
    cursor: "ew-resize",
    backgroundColor: 'transparent',
    height: "100%",
    position: "absolute",
    right: 0,
    top: 0,
    transition: 'background-color 0.2s',
    '&:hover': {
        backgroundColor: theme.palette.primary.main,
    },
    zIndex: 2
}));

const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing }) => {
    const [collapsed, setCollapsed] = useState(false);
    const [hovered, setHovered] = useState(false);

    const handleToggleCollapse = () => {
        setCollapsed(!collapsed);
    };

    const handleSelectItem = (id, title, children) => {
        onOpenTab(id, title, children);
    };

    const drawerWidth = collapsed ? 64 : sidebarWidth;

    return (
        <Box
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            sx={{
                position: 'relative',
                width: drawerWidth,
                transition: 'width 0.3s ease',
            }}
        >
            <Drawer
                variant="permanent"
                sx={{
                    width: drawerWidth,
                    flexShrink: 0,
                    '& .MuiDrawer-paper': {
                        width: drawerWidth,
                        boxSizing: "border-box",
                        display: "flex",
                        flexDirection: "column",
                        backgroundColor: 'custom.sidebar',
                        color: 'custom.sidebarText',
                        transition: 'width 0.3s ease',
                        overflowX: 'hidden',
                        borderRight: 'none'
                    },
                }}
            >
                {/* Кнопка сворачивания/разворачивания */}
                <Box sx={{
                    display: 'flex',
                    justifyContent: 'flex-end',
                    p: 1,
                    borderBottom: '1px solid',
                    borderColor: 'divider',
                    backgroundColor: 'custom.sidebar'
                }}>
                    <Tooltip title={collapsed ? "Развернуть меню" : "Свернуть меню"}>
                        <IconButton
                            onClick={handleToggleCollapse}
                            size="small"
                            sx={{
                                color: 'custom.sidebarText',
                                '&:hover': {
                                    backgroundColor: 'custom.sidebarHover',
                                }
                            }}
                        >
                            {collapsed ? (
                                hovered ? <ChevronRight /> : <MenuIcon />
                            ) : (
                                <ChevronLeft />
                            )}
                        </IconButton>
                    </Tooltip>
                </Box>

                {/* Содержимое меню */}
                <Box sx={{
                    flexGrow: 1,
                    display: 'flex',
                    flexDirection: 'column',
                    overflow: 'hidden'
                }}>
                    <List sx={{
                        overflowY: 'auto',
                        overflowX: 'hidden',
                        flex: '1 1 auto'
                    }}>
                        {!collapsed && (
                            <Typography
                                variant="h6"
                                sx={{
                                    p: 2,
                                    fontWeight: 'bold',
                                    textAlign: 'center'
                                }}
                            >
                                Меню
                            </Typography>
                        )}
                        <MenuItem
                            item={data}
                            onSelectItem={handleSelectItem}
                            collapsed={collapsed}
                        />
                    </List>

                    {/* Футер */}
                    {!collapsed && (
                        <SidebarFooter />
                    )}
                </Box>

                {/* Ресайзер */}
                {!collapsed && (
                    <SidebarResizer onMouseDown={startResizing} />
                )}
            </Drawer>
        </Box>
    );
};

export default SidebarMenu;