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

type SettingsUploadProps = {
  question: QuizQuestionFile;
};

export default function SettingsUpload({ question }: SettingsUploadProps) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));

  return (
    <Box
      sx={{
        boxSizing: "border-box",
        pt: isMobile ? "30px" : "20px",
        pb: "20px",
        pl: "20px",
        pr: isMobile ? "20px" : "0px",
        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={{
          display: isMobile ? "flex" : "block",
          mr: isMobile ? "0px" : "16px",
        }}
        label={"Необязательный вопрос"}
        checked={!question.content.required}
        handleChange={(e) => {
          updateQuestion<QuizQuestionFile>(question.id, (question) => {
            question.content.required = !e.target.checked;
          });
        }}
      />
    </Box>
  );
}