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";

import type { QuestionType } from "@root/questions";

type SettingTextFieldProps = {
  totalIndex: number;
};

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

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

export default function SettingTextField({
  totalIndex,
}: SettingTextFieldProps) {
  const { listQuestions } = questionStore();
  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 }) => value === listQuestions[totalIndex].content.type
            )}
            onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
              const clonContent = listQuestions[totalIndex].content;
              clonContent.type = ANSWER_TYPES[Number(target.value)].value;
              updateQuestionsList(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>
  );
}