import { Box, Button, Typography, useTheme } from "@mui/material";
import { useParams } from "react-router-dom";

import { FormDraggableList } from "./FormDraggableList";

import {
  questionStore,
  createQuestion,
  updateQuestionsList,
} from "@root/questions";
import { quizStore } from "@root/quizes";

import ArrowLeft from "../../../assets/icons/questionsPage/arrowLeft";
import AddAnswer from "../../../assets/icons/questionsPage/addAnswer";

import type {
  AnyQuizQuestion,
  QuizQuestionBase,
} from "../../../model/questionTypes/shared";

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

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

  const theme = useTheme();

  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={collapseEverything}
        >
          Свернуть всё
        </Button>
      </Box>
      <Box
        sx={{
          maxWidth: "796px",
          boxShadow: "0px 10px 30px #e7e7e7",
          borderRadius: "12px",
          marginBottom: "40px",
          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={() => {
            createQuestion(quizId);
            updateQuestionsList<QuizQuestionBase>(
              quizId,
              listQuestions[quizId].length - 1 || 0,
              {
                expanded: true,
              }
            );
          }}
        >
          <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" }}
        >
          <ArrowLeft />
        </Button>
        <Button
          variant="contained"
          sx={{
            height: "44px",
            padding: "10px 20px",
            borderRadius: "8px",
            background: theme.palette.brightPurple.main,
            fontSize: "18px",
          }}
          onClick={handleNext}
        >
          Следующий шаг
        </Button>
      </Box>
    </>
  );
}