frontPanel/src/pages/startPage/steptwo.tsx

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";
import { useRef, useState, useEffect } from "react";

import arrowLeftIcon from "../../assets/icons/arrow_left.svg";
import arrowRightIcon from "../../assets/icons/arrow_right.svg";

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

  const containerRef = useRef<HTMLDivElement | null>(null);
  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (containerRef.current && buttonRefs.current.length > 0) {
      const buttonWidth = buttonRefs.current[0]!.offsetWidth;

      containerRef.current.scrollTo({
        left: currentIndex * buttonWidth,
        behavior: "smooth",
      });
    }
  }, [currentIndex]);

  const handlePrevClick = () => {
    setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
  };

  const handleNextClick = () => {
    setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, 2));
  };

  if (!config) return null;

  return (
    <Box sx={{ mt: "60px" }}>
      <Typography variant="h5">Стартовая страница</Typography>
      <Box
        sx={{
          paddingBottom: "15px",
          "&::-webkit-scrollbar": { width: 0 },
          position: "relative",
        }}
      >
        <Box
          ref={containerRef}
          sx={{
            overflow: "auto",
            display: "flex",
            gap: "20px",
            mt: "40px",
            position: "relative",
            padding: isSmallMonitor ? "0 15px 15px" : 0,
            scrollbarWidth: "none",
            "&::-webkit-scrollbar": {
              width: 0,
            },
          }}
        >
          <Button
            sx={{ minWidth: "325px" }}
            ref={(ref) => (buttonRefs.current[0] = ref as HTMLButtonElement)}
            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
            sx={{ minWidth: "325px" }}
            ref={(ref) => (buttonRefs.current[1] = ref as HTMLButtonElement)}
            variant="text"
            onClick={() => {
              setQuizStartpageType(quiz.id, "expanded");
            }}
          >
            <CardWithImage
              image={cardImage2}
              text="Expanded"
              border={
                config.startpageType === "expanded"
                  ? "1px solid #7E2AEA"
                  : "none"
              }
            />
          </Button>
          <Button
            sx={{ minWidth: "325px" }}
            ref={(ref) => (buttonRefs.current[2] = ref as HTMLButtonElement)}
            variant="text"
            onClick={() => {
              setQuizStartpageType(quiz.id, "centered");
            }}
          >
            <CardWithImage
              image={cardImage3}
              text="Centered"
              border={
                config.startpageType === "centered"
                  ? "1px solid #7E2AEA"
                  : "none"
              }
            />
          </Button>
        </Box>
        {isSlider && (
          <>
            <img
              onClick={handlePrevClick}
              style={{
                position: "absolute",
                left: "0",
                top: "55%",
                width: "40px",
                top: "calc(50% - 40px)",
              }}
              src={arrowLeftIcon}
            />
            <img
              onClick={handleNextClick}
              style={{
                position: "absolute",
                right: "0",
                top: "55%",
                width: "40px",
                top: "calc(50% - 40px)",
              }}
              src={arrowRightIcon}
            />
          </>
        )}
      </Box>
    </Box>
  );
}