import {
  Box,
  Button,
  Typography,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import CardWithImage from "./CardWithImage";
import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";

export default function Steptwo() {
  const params = Number(useParams().quizId);
  const { listQuizes, updateQuizesList } = quizStore();
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));

  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={() => {
              updateQuizesList(params, { startpage: "standard" });
            }}
          >
            <CardWithImage
              image={cardImage1}
              text="Standard"
              border={
                listQuizes[params].startpage === "standard"
                  ? "1px solid #7E2AEA"
                  : "none"
              }
            />
          </Button>
          <Button
            variant="text"
            onClick={() => {
              updateQuizesList(params, { startpage: "expanded" });
            }}
          >
            <CardWithImage
              image={cardImage2}
              text="Expanded"
              border={
                listQuizes[params].startpage === "expanded"
                  ? "1px solid #7E2AEA"
                  : "none"
              }
            />
          </Button>
          <Button
            variant="text"
            onClick={() => {
              updateQuizesList(params, { startpage: "centered" });
            }}
          >
            <CardWithImage
              image={cardImage3}
              text="Centered"
              border={
                listQuizes[params].startpage === "centered"
                  ? "1px solid #7E2AEA"
                  : "none"
              }
            />
          </Button>
        </Box>
      </Box>
    </Box>
  );
}