import { Box, Button } 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 { setQuizType } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";


export default function StepOne() {
    const { quiz } = useCurrentQuiz();
    const config = quiz?.config;

    if (!config) return null; // TODO throw and catch with error boundary

    return (
        <Box
            sx={{
                overflowX: "scroll",
                padding: "0 5px 15px",
                "&::-webkit-scrollbar": { width: 0 },
            }}
        >
            <Box
                sx={{
                    minWidth: "720px",
                    display: "flex",
                    gap: "20px",
                    mt: "60px",
                }}
            >
                <Button
                    variant="text"
                    data-cy="create-quiz-card"
                    onClick={() => {
                        setQuizType(quiz.id, "quiz");
                    }}
                >
                    <CreationCard
                        header="Создание квиз-опроса"
                        text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                        image={quizCreationImage1}
                        border={
                            config.type === "quiz"
                                ? "1px solid #7E2AEA"
                                : "none"
                        }
                    />
                </Button>
                <Button
                    variant="text"
                    onClick={() => {
                        setQuizType(quiz.id, "form");
                    }}
                >
                    <CreationCard
                        header="Создание анкеты"
                        text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                        image={quizCreationImage2}
                        border={
                            config.type === "form"
                                ? "1px solid #7E2AEA"
                                : "none"
                        }
                    />
                </Button>
            </Box>
        </Box>
    );
}