import { Box, Button, Tooltip } from "@mui/material";
import { updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import image from "../../assets/Rectangle 110.png";
import Info from "../../assets/icons/Info";
import CreationFullCard from "./CreationFullCard";


export const Result = () => {
    const quiz = useCurrentQuiz();

    if (!quiz) return null;

    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={() => updateQuiz(quiz.id, quiz => {
                        quiz.config.results = true;
                    })}
                >
                    Создать результаты
                </Button>
                <Tooltip title="Посмотреть справку" placement="top">
                    <Box>
                        <Info />
                    </Box>
                </Tooltip>
            </Box>
        </Box>
    );
};
