import { Box, Button, IconButton, Typography, 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";

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

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

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

  const theme = useTheme();
  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(params);
            console.log(listQuestions);
          }}
        >
          <AddPlus />
        </IconButton>
        <Box sx={{ display: "flex", gap: "8px" }}>
          <Button
            variant="outlined"
            sx={{ padding: "10px 20px", borderRadius: "8px" }}
          >
            <ArrowLeft />
          </Button>
          <Button
            variant="contained"
            sx={{
              padding: "10px 20px",
              borderRadius: "8px",
              background: theme.palette.brightPurple.main,
              fontSize: "18px",
            }}
            onClick={handleNext}
          >
            Следующий шаг
          </Button>
        </Box>
      </Box>
    </>
  );
}