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

import Info from "../../assets/icons/Info";

import image from "../../assets/Rectangle 110.png";
import { quizStore } from "@root/quizes";

export const Result = () => {
  const { listQuizes, updateQuizesList } = quizStore();
  const params = Number(useParams().quizId);
  const handleNext = () => {
    updateQuizesList(params, { createResult: true });
  };
  const theme = useTheme();
  return (
    <Box component="section">
      <CreationFullCard
        text="Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке."
        text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
        image={image}
      />
      <Box sx={{ display: "flex", mt: "30px", alignItems: "center" }}>
        <Button
          variant="contained"
          sx={{ mr: "15px", minWidth: "258px" }}
          onClick={handleNext}
        >
          Создать результаты
        </Button>
        <Tooltip title="Посмотреть справку" placement="top">
          <Box>
            <Info />
          </Box>
        </Tooltip>
      </Box>
    </Box>
  );
};