import React from "react";
import Stepper from "@ui_kit/Stepper";
import {Box, Button, IconButton, Typography, Paper, useTheme, Link} 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 QuestionsPageCard from "./QuestionPageCard";
import {questionStore, createQuestion} from "@root/questions";
import QuestionsList from "./questionList";

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

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


    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>
          <Link sx={{
              fontSize: "16px",
              lineHeight: "19px",
              color: theme.palette.brightPurple.main,
              textDecorationColor: theme.palette.brightPurple.main
          }}>Свернуть всё</Link>
      </Box>
      <QuestionsList/>

      <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>
    </>
  );
}