import {
    Box,
    Button,
    IconButton,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
import {
    questionStore,
    createQuestion,
    updateQuestionsList,
} from "@root/questions";
import { DraggableList } from "./DraggableList";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
import { createPortal } from "react-dom";

export default function QuestionsPage() {
    const { listQuizes, updateQuizesList } = quizStore();
    const quizId = Number(useParams().quizId);
    const { listQuestions } = questionStore();
    const handleNext = () => {
        updateQuizesList(quizId, { step: listQuizes[quizId].step + 1 });
    };

    const handleBack = () => {
        let result = listQuizes[quizId].step - 1;
        updateQuizesList(quizId, { step: result ? result : 1 });
    };

    const collapseEverything = () => {
        listQuestions[quizId].forEach((item, index) => {
            updateQuestionsList(quizId, index, { ...item, expanded: false });
        });
    };

    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.up(1000));

    return (
        <>
            {/* <Stepper activeStep={activeStep} desc={"Задайте вопросы"} /> */}
            <Box
                sx={{
                    maxWidth: "796px",
                    width: "100%",
                    display: "flex",
                    justifyContent: "space-between",
                    margin: "60px 0 40px 0",
                }}
            >
                <Typography variant={"h5"}>Заголовок квиза</Typography>
                <Button
                    sx={{
                        fontSize: "16px",
                        lineHeight: "19px",
                        padding: 0,
                        textDecoration: "underline",
                        color: theme.palette.brightPurple.main,
                        textDecorationColor: theme.palette.brightPurple.main,
                    }}
                    onClick={collapseEverything}
                >
                    Свернуть всё
                </Button>
            </Box>
            <DraggableList />
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    maxWidth: "796px",
                }}
            >
                <IconButton
                    onClick={() => {
                        createQuestion(quizId);
                        console.log(listQuestions);
                    }}
                >
                    <AddPlus />
                </IconButton>
                <Box sx={{ display: "flex", gap: "8px" }}>
                    <Button
                        variant="outlined"
                        sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
                    >
                        <ArrowLeft />
                    </Button>
                    <Button
                        variant="contained"
                        sx={{
                            height: "44px",
                            padding: "10px 20px",
                            borderRadius: "8px",
                            background: theme.palette.brightPurple.main,
                            fontSize: "18px",
                        }}
                        onClick={handleNext}
                    >
                        Следующий шаг
                    </Button>
                </Box>
            </Box>
            {createPortal(<QuizPreview />, document.body)}
        </>
    );
}