import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";

type SettingSliderProps = {
  question: QuizQuestionNumber;
};

export default function SettingSlider({ question }: SettingSliderProps) {
  const theme = useTheme();
  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "space-between",
        flexDirection: isWrappColumn ? "column" : null,
      }}
    >
      <Box
        sx={{
          pt: isMobile ? "25px" : "20px",
          pb: isMobile ? "30px" : "20px",
          pl: "20px",
          display: "flex",
          flexDirection: "column",
          gap: "14px",
          width: isMobile ? "auto" : "100%",
        }}
      >
        <Typography
          sx={{
            height: isMobile ? "18px" : "auto",
            fontWeight: "500",
            fontSize: "18px",
            color: " #4D4D4D",
          }}
        >
          Настройки ползунка
        </Typography>
        <CustomCheckbox
          sx={{
            mr: isMobile ? "0px" : "16px",
            height: isMobile ? "100%" : "auto",
            alignItems: isMobile ? "flex-start" : "center",
          }}
          label={"Выбор диапазона (два ползунка)"}
          checked={question.content.chooseRange}
          handleChange={({ target }) => {
            updateQuestion(question.id, (question) => {
              if (question.type !== "number") return;

              question.content.chooseRange = target.checked;
            });
          }}
        />
      </Box>
      <Box
        sx={{
          pt: isMobile ? "0px" : "20px",
          pb: "20px",
          pl: isFigmaTablte ? (isWrappColumn ? "20px" : "0px") : "0px",
          pr: isFigmaTablte ? (isMobile ? "20px" : "12px") : "20px",
          display: "flex",
          flexDirection: "column",
          gap: "14px",
          width: isMobile ? "auto" : "100%",
        }}
      >
        <Typography
          sx={{
            height: isMobile ? "18px" : "auto",
            fontWeight: "500",
            fontSize: "18px",
            color: " #4D4D4D",
          }}
        >
          Настройки вопросов
        </Typography>
        <CustomCheckbox
          dataCy="checkbox-optional-question"
          sx={{
            mr: isMobile ? "0px" : "16px",
            alignItems: isMobile ? "flex-end" : "center",
          }}
          label={"Необязательный вопрос"}
          checked={!question.content.required}
          handleChange={(e) => {
            updateQuestion<QuizQuestionNumber>(question.id, (question) => {
              if (question.type !== "number") return;

              question.content.required = !e.target.checked;
            });
          }}
        />
      </Box>
    </Box>
  );
}