import {
    Box,
    Button,
    IconButton,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { collapseAllQuestions, createQuestion } from "@root/questions/actions";
import { 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 { DraggableList } from "./DraggableList";


export default function QuestionsPage() {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(660));
    const { quiz } = useCurrentQuiz();

    if (!quiz) return null;

    return (
        <>
            <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={collapseAllQuestions}
                >
                    Свернуть всё
                </Button>
            </Box>
            <DraggableList />
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    maxWidth: "796px",
                }}
            >
                <IconButton
                    onClick={() => {
                        createQuestion(quiz.id);
                    }}
                    sx={{
                        position: "fixed",
                        left: isMobile ? "20px" : "250px",
                        bottom: "20px",
                    }}
                >
                    <AddPlus />
                </IconButton>
                <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
                    <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={incrementCurrentStep}
                    >
                        Следующий шаг
                    </Button>
                </Box>
            </Box>
            {createPortal(<QuizPreview />, document.body)}
        </>
    );
}