import {
    Box,
    Button,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { setQuizStartpageType } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";
import CardWithImage from "./CardWithImage";


export default function Steptwo() {
    const theme = useTheme();
    const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
    const quiz = useCurrentQuiz();

    const config = quiz?.config;

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

    return (
        <Box sx={{ mt: "60px" }}>
            <Typography variant="h5">Стартовая страница</Typography>
            <Box
                sx={{
                    overflowX: "scroll",
                    paddingBottom: "15px",
                    "&::-webkit-scrollbar": { width: 0 },
                }}
            >
                <Box
                    sx={{
                        minWidth: "950px",
                        display: "flex",
                        gap: "20px",
                        mt: "40px",
                        padding: isSmallMonitor ? "0 15px 15px" : 0,
                    }}
                >
                    <Button
                        variant="text"
                        data-cy="select-quiz-layout-standard"
                        onClick={() => {
                            setQuizStartpageType(quiz.id, "standard");
                        }}
                    >
                        <CardWithImage
                            image={cardImage1}
                            text="Standard"
                            border={
                                config.startpageType === "standard"
                                    ? "1px solid #7E2AEA"
                                    : "none"
                            }
                        />
                    </Button>
                    <Button
                        variant="text"
                        onClick={() => {
                            setQuizStartpageType(quiz.id, "expanded");
                        }}
                    >
                        <CardWithImage
                            image={cardImage2}
                            text="Expanded"
                            border={
                                config.startpageType === "expanded"
                                    ? "1px solid #7E2AEA"
                                    : "none"
                            }
                        />
                    </Button>
                    <Button
                        variant="text"
                        onClick={() => {
                            setQuizStartpageType(quiz.id, "centered");
                        }}
                    >
                        <CardWithImage
                            image={cardImage3}
                            text="Centered"
                            border={
                                config.startpageType === "centered"
                                    ? "1px solid #7E2AEA"
                                    : "none"
                            }
                        />
                    </Button>
                </Box>
            </Box>
        </Box>
    );
}