import CollapseMenuIcon from "@icons/CollapseMenuIcon";
import GearIcon from "@icons/GearIcon";
import PencilCircleIcon from "@icons/PencilCircleIcon";
import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
import TagIcon from "@icons/TagIcon";
import { quizSetupSteps } from "@model/quizSettings";
import {
    Box,
    IconButton,
    List,
    Typography,
    useTheme
} from "@mui/material";
import { setCurrentStep } from "@root/quizes/actions";
import { useQuizStore } from "@root/quizes/store";
import { useState } from "react";
import MenuItem from "./MenuItem";


const quizSettingsMenuItems = [
    [TagIcon, "Дополнения"],
    [PencilCircleIcon, "Дизайн"],
    [PuzzlePieceIcon, "Интеграции"],
    [GearIcon, "Настройки"],
] as const;

export default function Sidebar() {
    const theme = useTheme();
    const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
    const currentStep = useQuizStore(state => state.currentStep);

    const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev);

    return (
        <Box
            sx={{
                backgroundColor: theme.palette.lightPurple.main,
                minWidth: isMenuCollapsed ? "80px" : "230px",
                width: isMenuCollapsed ? "80px" : "230px",
                height: "calc(100vh - 80px)",
                display: "flex",
                flexDirection: "column",
                py: "19px",
                transitionProperty: "width, min-width",
                transitionDuration: "200ms",
                overflow: "hidden",
                whiteSpace: "nowrap",
                boxSizing: "border-box",
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    pl: isMenuCollapsed ? undefined : "16px",
                    pr: isMenuCollapsed ? undefined : "8px",
                    mb: isMenuCollapsed ? "5px" : undefined,
                    alignItems: "center",
                    justifyContent: isMenuCollapsed ? "center" : undefined,
                }}
            >
                {!isMenuCollapsed && (
                    <Typography
                        sx={{
                            fontSize: "14px",
                            lineHeight: "20px",
                            fontWeight: 500,
                            color: theme.palette.grey2.main,
                        }}
                    >
                        Создание квиза
                    </Typography>
                )}
                <IconButton
                    onClick={handleMenuCollapseToggle}
                    sx={{ ml: isMenuCollapsed ? undefined : "auto" }}
                >
                    <CollapseMenuIcon
                        height="16px"
                        width="16px"
                        color={theme.palette.grey2.main}
                        transform={isMenuCollapsed ? "rotate(180deg)" : ""}
                    />
                </IconButton>
            </Box>
            <List disablePadding>
                {quizSetupSteps.map((menuItem, index) => {
                    const Icon = menuItem.sidebarIcon;
                    
                    return (
                        <MenuItem
                            onClick={() => setCurrentStep(index)}
                            key={index}
                            text={menuItem.sidebarText}
                            isCollapsed={isMenuCollapsed}
                            isActive={currentStep === index}
                            icon={
                                <Icon
                                    color={
                                        currentStep === index
                                            ? theme.palette.brightPurple.main
                                            : isMenuCollapsed
                                                ? "white"
                                                : theme.palette.grey2.main
                                    }
                                    height={isMenuCollapsed ? "35px" : "24px"}
                                    width={isMenuCollapsed ? "35px" : "24px"}
                                />
                            }
                        />
                    );
                })}
            </List>
            {!isMenuCollapsed && (
                <Typography
                    sx={{
                        px: "16px",
                        mt: "16px",
                        mb: "6px",
                        fontSize: "14px",
                        lineHeight: "20px",
                        fontWeight: 500,
                        color: theme.palette.grey2.main,
                    }}
                >
                    Настройки квиза
                </Typography>
            )}
            <List disablePadding>
                {quizSettingsMenuItems.map((menuItem, index) => {
                    const Icon = menuItem[0];
                    const totalIndex = index + quizSetupSteps.length;
                    const isActive = currentStep === totalIndex + 1;

                    return (
                        <MenuItem
                            onClick={() => null}
                            key={menuItem[1]}
                            text={menuItem[1]}
                            isActive={isActive}
                            isCollapsed={isMenuCollapsed}
                            icon={
                                <Icon
                                    color={
                                        isActive
                                            ? theme.palette.brightPurple.main
                                            : isMenuCollapsed
                                                ? "white"
                                                : theme.palette.grey2.main
                                    }
                                    height={isMenuCollapsed ? "35px" : "24px"}
                                    width={isMenuCollapsed ? "35px" : "24px"}
                                />
                            }
                        />
                    );
                })}
            </List>
        </Box>
    );
}
