import { Box, FormControlLabel, Radio, RadioGroup, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import type { QuizQuestionText } from "../../../model/questionTypes/text";
import { memo } from "react";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

type Answer = "single" | "multi" | "numberOnly";

type AnswerItem = {
  name: string;
  value: Answer;
};

const ANSWER_TYPES: AnswerItem[] = [
  { name: "Однострочное", value: "single" },
  { name: "Многострочное", value: "multi" },
  { name: "Только числа", value: "numberOnly" },
];

type SettingTextFieldProps = {
  questionId: string;
  isRequired: boolean;
  isAutofill: boolean;
  answerType: Answer;
};

const SettingTextField = memo<SettingTextFieldProps>(function ({ questionId, isRequired, isAutofill, answerType }) {
  const theme = useTheme();
  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
  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>
        <RadioGroup
          value={answerType}
          onChange={(event) => {
            updateQuestion<QuizQuestionText>(questionId, (question) => {
              question.content.answerType = event.target.value as Answer;
            });
          }}
          sx={{
            display: "flex",
            flexDirection: "column",
          }}
        >
          {ANSWER_TYPES.map((answerTypeItem, index) => (
            <FormControlLabel
              value={answerTypeItem.value}
              control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
              label={answerTypeItem.name}
              sx={{
                color: theme.palette.grey2.main,
              }}
            />
          ))}
        </RadioGroup>
      </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-autofill"
          sx={{
            display: isMobile ? "flex" : "block",
            mr: isMobile ? "0px" : "16px",
            alignItems: isMobile ? "flex-end" : "center",
          }}
          label={"Автозаполнение адреса"}
          checked={isAutofill}
          handleChange={(e) => {
            updateQuestion<QuizQuestionText>(questionId, (question) => {
              question.content.autofill = e.target.checked;
            });
          }}
        />
        <CustomCheckbox
          dataCy="checkbox-optional-question"
          sx={{
            display: isMobile ? "flex" : "block",
            mr: isMobile ? "0px" : "16px",
            alignItems: isMobile ? "flex-end" : "center",
          }}
          label={"Необязательный вопрос"}
          checked={!isRequired}
          handleChange={(e) => {
            updateQuestion<QuizQuestionText>(questionId, (question) => {
              question.content.required = !e.target.checked;
            });
          }}
        />
      </Box>
    </Box>
  );
});

SettingTextField.displayName = "SettingTextField";

export default SettingTextField;