frontPanel/src/components/CreateQuiz/CreateQuiz.tsx

import { useState } from "react";
import { Container, Box, useTheme, List, Typography, IconButton } from "@mui/material";
import MenuItem from "./MenuItem";
import MegaphoneIcon from "../icons/MegaphoneIcon";
import QuestionIcon from "../icons/QuestionIcon";
import ChartPieIcon from "../icons/ChartPieIcon";
import ContactBookIcon from "../icons/ContactBookIcon";
import FlowArrowIcon from "../icons/FlowArrowIcon";
import CollapseMenuIcon from "../icons/CollapseMenuIcon";
import TagIcon from "../icons/TagIcon";
import PencilCircleIcon from "../icons/PencilCircleIcon";
import PuzzlePieceIcon from "../icons/PuzzlePieceIcon";
import GearIcon from "../icons/GearIcon";
import LayoutIcon from "../icons/LayoutIcon";
import CreationCard from "./CreationCard";
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
import quizCreationImage2 from "../../assets/quiz-creation-2.png";


const createQuizMenuItems = [
    [LayoutIcon, "Стартовая страница"],
    [QuestionIcon, "Вопросы"],
    [ChartPieIcon, "Результаты"],
    [ContactBookIcon, "Форма контактов"],
    [FlowArrowIcon, "Установка квиза"],
    [MegaphoneIcon, "Запуск рекламы"],
] as const;

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

export default function CreateQuiz() {
    const theme = useTheme();
    const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
    const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
    const [progress, setProgress] = useState<number>(1 / 6);

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

    return (
        <Container
            maxWidth={false}
            disableGutters
            sx={{
                display: "flex",
                height: "calc(100vh - 80px)",
            }}
        >
            <Box
                sx={{
                    backgroundColor: theme.palette.lightPurple.main,
                    minWidth: isMenuCollapsed ? "80px" : "230px",
                    width: isMenuCollapsed ? "80px" : "230px",
                    display: "flex",
                    flexDirection: "column",
                    py: "19px",
                    transitionProperty: "width, min-width",
                    transitionDuration: "200ms",
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                }}
            >
                <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>
                    {createQuizMenuItems.map((menuItem, index) => {
                        const Icon = menuItem[0];
                        return (
                            <MenuItem
                                onClick={() => setActiveMenuItemIndex(index)}
                                key={menuItem[1]}
                                text={menuItem[1]}
                                isCollapsed={isMenuCollapsed}
                                isActive={activeMenuItemIndex === index}
                                icon={<Icon
                                    color={activeMenuItemIndex === 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: "11px",
                            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 + createQuizMenuItems.length;
                        const isActive = activeMenuItemIndex === totalIndex;
                        return (
                            <MenuItem
                                onClick={() => setActiveMenuItemIndex(totalIndex)}
                                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>
            <Container
                maxWidth="lg"
                disableGutters
                sx={{
                    p: "25px",
                    [theme.breakpoints.up("lg")]: {
                        maxWidth: "1210px",
                    }
                }}
            >
                <Box
                    sx={{
                        border: `1px solid ${theme.palette.brightPurple.main}`,
                        borderRadius: "12px",
                        overflow: "hidden",
                        px: "20px",
                        pt: "20px",
                        pb: "10px",
                        position: "relative",
                    }}
                >
                    <Box
                        sx={{
                            backgroundColor: "white",
                            height: "10px",
                            position: "absolute",
                            top: 0,
                            left: 0,
                            width: "100%",
                            boxShadow: `0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
                        }}
                    />
                    <Box
                        sx={{
                            backgroundColor: theme.palette.brightPurple.main,
                            height: "10px",
                            position: "absolute",
                            top: 0,
                            left: 0,
                            width: `${(progress * 100).toFixed(3)}%`,
                        }}
                    />
                    <Typography
                        sx={{
                            fontSize: "12px",
                            lineHeight: "14px",
                            color: "#4D4D4D",
                        }}
                    >Шаг 1 из 6</Typography>
                    <Typography
                        sx={{
                            fontSize: "18px",
                            lineHeight: "24px",
                            color: "#4D4D4D",
                            mt: "5px",
                        }}
                    >Настройка стартовой страницы</Typography>
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        gap: "3.4%",
                        mt: "60px",
                    }}
                >
                    <CreationCard
                        header="Создание квиз-опроса"
                        text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                        image={quizCreationImage1}
                    />
                    <CreationCard
                        header="Создание анкеты"
                        text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                        image={quizCreationImage2}
                    />
                </Box>
            </Container>
        </Container>
    );
}