import { Box, Button, Typography, useTheme } from "@mui/material";
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
import { createPortal } from "react-dom";
import AddAnswer from "../../../assets/icons/questionsPage/addAnswer";
import ArrowLeft from "../../../assets/icons/questionsPage/arrowLeft";
import { FormDraggableList } from "./FormDraggableList";
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";


export default function FormQuestionsPage() {
    const theme = useTheme();
    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>
            <Box
                sx={{
                    maxWidth: "796px",
                    boxShadow: "0px 10px 30px #e7e7e7",
                    borderRadius: "12px",
                    marginBottom: "30px",
                    borderTop: "1px solid transparent",
                    borderBottom: "1px solid transparent",
                    background: "#FFFFFF",
                }}
            >
                <FormDraggableList />
                <Box
                    sx={{
                        cursor: "pointer",
                        display: "flex",
                        alignItems: "center",
                        gap: "15px",
                        padding: "4px",
                        margin: "15px",
                        border: "1px solid transparent",
                        borderRadius: "8px",
                        "&:hover": {
                            border: "1px solid #9A9AAF",
                        },
                    }}
                    onClick={() => {
                        createUntypedQuestion(quiz.backendId);
                    }}
                    data-cy="create-question"
                >
                    <AddAnswer color="#EEE4FC" />
                    <Typography sx={{ color: "#9A9AAF" }}>
                        Добавить еще один вопрос
                    </Typography>
                </Box>
            </Box>
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "flex-end",
                    gap: "8px",
                    maxWidth: "796px",
                }}
            >
                <Button
                    variant="outlined"
                    sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
                    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>
            {createPortal(<QuizPreview />, document.body)}
        </>
    );
}
