import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import type { QuizQuestionDate } from "@frontend/squzanswerer";

type SettingsDataProps = {
  questionId: string;
  isRequired: boolean;
  isRange: boolean;
  isTime: boolean;
};

export default function SettingsData({ questionId, isRequired, isRange, isTime }: SettingsDataProps) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isTablet = useMediaQuery(theme.breakpoints.down(900));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "space-between",
        flexDirection: isTablet ? "column" : "row",
        marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
        pb: "20px",
        pl: "20px",
        pt: isTablet ? "5px" : "0px",
      }}
    >
      <Box
        sx={{
          boxSizing: "border-box",
          pt: "20px",
          pr: isFigmaTablte ? "19px" : "20px",
          display: "flex",
          flexDirection: "column",
          gap: "14px",
          width: "100%",
        }}
      >
        <Typography
          sx={{
            height: isMobile ? "18px" : "auto",
            fontWeight: "500",
            fontSize: "18px",
            color: " #4D4D4D",
          }}
        >
          Настройки ответов
        </Typography>
        <CustomCheckbox
          dataCy="checkbox-dateRange"
          sx={{ mr: isMobile ? "0px" : "16px" }}
          label={"Выбор диапазона дат"}
          checked={isRange}
          handleChange={({ target }) => {
            updateQuestion<QuizQuestionDate>(questionId, (question) => {
              question.content.isRange = target.checked;
            });
          }}
        />
        {/* <CustomCheckbox
          dataCy="checkbox-time"
          sx={{ mr: isMobile ? "0px" : "16px" }}
          label={"Выбор времени"}
          checked={isTime}
          handleChange={({ target }) => {
            updateQuestion<QuizQuestionDate>(questionId, (question) => {
              question.content.time = target.checked;
            });
          }}
        /> */}
      </Box>
      <Box
        sx={{
          boxSizing: "border-box",
          pt: "20px",
          pr: isFigmaTablte ? "19px" : "20px",
          display: "flex",
          flexDirection: "column",
          gap: "14px",
          width: "100%",
        }}
      >
        <Typography
          sx={{
            height: isMobile ? "18px" : "auto",
            fontWeight: "500",
            fontSize: "18px",
            color: " #4D4D4D",
          }}
        >
          Настройки вопросов
        </Typography>
        <CustomCheckbox
          dataCy="checkbox-optional-question"
          sx={{ mr: isMobile ? "0px" : "16px" }}
          label={"Необязательный вопрос"}
          checked={!isRequired}
          handleChange={({ target }) => {
            updateQuestion<QuizQuestionDate>(questionId, (question) => {
              question.content.required = !target.checked;
            });
          }}
        />
      </Box>
    </Box>
  );
}
