import { useState, useEffect, useLayoutEffect, useRef } from "react"
import {
    Box,
    Button,
    IconButton,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
import { createPortal } from "react-dom";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
import { useQuestionsStore } from "@root/questions/store";
import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store";

export default function QuestionsPage() {
    const theme = useTheme();
    const { openedModalSettingsId, openBranchingPanel } = useUiTools();
    const isMobile = false//useMediaQuery(theme.breakpoints.down(660));
    const quiz = useCurrentQuiz();
    useLayoutEffect(() => {
        updateOpenBranchingPanel(false)
        updateEditSomeQuestion()
    },[])

    const ref = useRef()
    if (!quiz) return null;


    return (
        <>
            <Box
                ref={ref}
                id="QuestionsPage"
                sx={{
                    maxWidth: "796px",
                    width: "100%",
                    display: "flex",
                    justifyContent: "space-between",
                    margin: "60px 0 40px 0",
                }}
            >
                <Typography variant={"h5"}>{
                    quiz.name ? quiz.name : "Заголовок квиза" }</Typography>
                <Button
                    sx={{
                        display: openBranchingPanel ? "none" : "flex",
                        fontSize: "16px",
                        lineHeight: "19px",
                        padding: 0,
                        textDecoration: "underline",
                        color: theme.palette.brightPurple.main,
                        textDecorationColor: theme.palette.brightPurple.main,
                    }}
                    onClick={collapseAllQuestions}
                >
                    Свернуть всё
                </Button>
            </Box>
            <QuestionSwitchWindowTool/>
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    maxWidth: "796px",
                }}
            >
                <IconButton
                    onClick={() => {
                        createUntypedQuestion(quiz.backendId);
                    }}
                    sx={{
                        position: "fixed",
                        left: isMobile ? "20px" : "250px",
                        bottom: "20px",
                    }}
                    data-cy="create-question"
                >
                    <AddPlus />
                </IconButton>

                
                <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
                    <Button
                        variant="outlined"
                        sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
                        data-cy="back-button"
                        onClick={decrementCurrentStep}
                    >
                        <ArrowLeft />
                    </Button>
                    <Button
                        variant="contained"
                        sx={{
                            height: "44px",
                            padding: "10px 20px",
                            borderRadius: "8px",
                            background: theme.palette.brightPurple.main,
                            fontSize: "18px",
                        }}
                        onClick={incrementCurrentStep}
                    >
                        Следующий шаг
                    </Button>
                </Box>
            </Box>
            {createPortal(<QuizPreview />, document.body)}
            {openedModalSettingsId !== null && <BranchingQuestions/>}
        </>
    );
}