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 CardWithImage from "./CardWithImage";
import CreationCard from "@ui_kit/CreationCard";
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
import quizCreationImage2 from "../../assets/quiz-creation-2.png";
import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";
import StartPageSettings from "../../pages/startPage/StartPageSettings";
import CustomButton from "../CustomButton";
import Sidebar from "@ui_kit/Sidebar";


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",
                minHeight: "calc(100vh - 80px)",
            }}
        >
            <Sidebar></Sidebar>
            <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>
                <Box sx={{
                    mt: "60px",
                }}>
                    <Typography variant="h5">Стартовая страница</Typography>
                    <Box sx={{
                        display: "flex",
                        gap: "3.4%",
                        mt: "40px",
                    }}>
                        <CardWithImage image={cardImage1} text="Standart" />
                        <CardWithImage image={cardImage2} text="Expanded" />
                        <CardWithImage image={cardImage3} text="Centered" />
                    </Box>
                </Box>
                <Box sx={{
                    mt: "60px",
                }}>
                    <Typography variant="h5" mb="40px">Стартовая страница</Typography>
                    <StartPageSettings />
                    <Box sx={{
                        mt: "30px",
                        width: "100%",
                        display: "flex",
                        gap: "20px",
                    }}>
                        <CustomButton
                            variant="outlined"
                            sx={{
                                border: `1px solid ${theme.palette.brightPurple.main}`,
                                color: theme.palette.brightPurple.main,
                                width: "auto",
                                ml: "auto",
                                px: "20px",
                                py: "9px",
                            }}
                        >Отключить стартовую страницу</CustomButton>
                        <CustomButton
                            variant="contained"
                            sx={{
                                backgroundColor: theme.palette.brightPurple.main,
                                color: "white",
                                width: "auto",
                                px: "20px",
                                py: "9px",
                            }}
                        >Настроить вопросы</CustomButton>
                    </Box>
                </Box>
            </Container>
        </Container>
    );
}