import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import MobileStepper from "@mui/material/MobileStepper";
import { QuizSetupStep, maxDisplayQuizSetupSteps, quizSetupSteps } from "@model/quizSettings";

interface Props {
  activeStep: QuizSetupStep;
}

export default function ProgressMobileStepper({
  activeStep,
}: Props) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  return (
    <Box
      sx={{
        maxWidth: isTablet ? "800px" : "100%",
        display: "flex",
        justifyContent: "center",
        flexDirection: "column",
        height: "73px",
        borderRadius: "13px",
        border: "solid #7E2AEA 1px",
        padding: "0 0 20px 0",
        overflow: "hidden",
      }}
    >
      <MobileStepper
        variant="progress"
        steps={maxDisplayQuizSetupSteps}
        position="static"
        activeStep={activeStep - 1}
        sx={{
          width: "100%",
          flexGrow: 1,
          padding: "8px 0",
          "& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress": {
            height: "10px",
            background: "#ffffff",
            width: "100%",
          },
          "& .css-1v0msyf-MuiLinearProgress-bar1": {
            background: "#7e2aea",
          },
        }}
        nextButton={<></>}
        backButton={<></>}
      />
      <Box sx={{ padding: "3px 3px 3px 20px" }}>
        <Typography
          sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}
        >
          {" "}
          Шаг {quizSetupSteps[activeStep].displayStep} из {maxDisplayQuizSetupSteps}
        </Typography>
        <Typography>{quizSetupSteps[activeStep].text}</Typography>
      </Box>
    </Box>
  );
}