import { Box, Button, Typography, useTheme } from "@mui/material";
import CreationCard from "@ui_kit/CreationCard";
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
import quizCreationImage2 from "../../assets/quiz-creation-2.png";
import {useParams} from "react-router-dom";
import {quizStore} from "@root/quizes";

interface HandleNext {
  handleNext: () => void;
}

export default function StepOne({ handleNext }: HandleNext) {
  const theme = useTheme();

  const params = Number(useParams().quizId);
  console.log(params)

  const {listQuizes, updateQuizesList,} = quizStore()
    console.log(listQuizes)
  return (
    <>
      <Box
        sx={{
          display: "flex",
          gap: "3.4%",
          mt: "60px",
        }}
      >
        <Button variant="text" onClick={() => {
            updateQuizesList(params, {config: "quize"})
            handleNext()
        }
        }>
          <CreationCard
            header="Создание квиз-опроса"
            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
            image={quizCreationImage1}
            border={listQuizes[params].config === "quize" ? "1px solid #7E2AEA" : "none"}
          />
        </Button>
        <Button variant="text" onClick={() => {
            updateQuizesList(params, {config: "form"})
            handleNext()
        }
        }>
          <CreationCard
            header="Создание анкеты"
            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
            image={quizCreationImage2}
            border={listQuizes[params].config === "form" ? "1px solid #7E2AEA" : "none"}
          />
        </Button>
      </Box>
    </>
  );
}