import { useParams } from "react-router-dom";
import {
  Box,
  FormControl,
  FormControlLabel,
  Radio,
  RadioGroup,
  Typography,
  useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";

import { questionStore, updateQuestionsList } from "@root/questions";

import InfoIcon from "../../../assets/icons/InfoIcon";

type SettingTextFieldProps = {
  totalIndex: number;
};

type Answer = {
  name: string;
  value: "single" | "multi" | "number";
};

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

export default function SettingTextField({
  totalIndex,
}: SettingTextFieldProps) {
  const { listQuestions } = questionStore();
  const quizId = Number(useParams().quizId);
  const theme = useTheme();

  return (
    <Box sx={{ display: "flex" }}>
      <Box sx={{ padding: "20px" }}>
        <Typography>Настройки ответов</Typography>
        <FormControl>
          <RadioGroup
            aria-labelledby="demo-controlled-radio-buttons-group"
            name="controlled-radio-buttons-group"
            value={ANSWER_TYPES.findIndex(
              ({ value }) => listQuestions[quizId][totalIndex].content[value]
            )}
            onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
              const clonContent = {
                ...listQuestions[quizId][totalIndex].content,
                single: false,
                multi: false,
                number: false,
                [ANSWER_TYPES[Number(target.value)].value]: true,
              };

              updateQuestionsList(quizId, totalIndex, { content: clonContent });
            }}
          >
            {ANSWER_TYPES.map(({ name }, index) => (
              <FormControlLabel
                key={index}
                sx={{ color: theme.palette.grey2.main }}
                value={index}
                control={<Radio />}
                label={name}
              />
            ))}
          </RadioGroup>
        </FormControl>
      </Box>
      <Box sx={{ padding: "20px" }}>
        <Typography>Настройки вопросов</Typography>
        <CustomCheckbox label={"Автозаполнение адреса"} />
        <CustomCheckbox label={"Необязательный вопрос"} />
        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
      </Box>
    </Box>
  );
}