import Box from "@mui/material/Box";
import {
  FormControl,
  SxProps,
  TextField,
  Theme,
  Typography,
} from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import Button from "@mui/material/Button";
import * as React from "react";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateQuiz } from "@root/quizes/actions";
import { FormContactFieldName } from "@model/quizSettings";

interface Props {
  outerContainerSx?: SxProps<Theme>;
  children?: React.ReactNode;
  defaultValue: FormContactFieldName;
  placeholderHelp: string;
  placeholderField: string;
  closeDrawer: () => void;
  noinputs: boolean;
}

export default function NewFieldParent({
  closeDrawer,
  defaultValue,
  placeholderHelp,
  placeholderField,
  outerContainerSx: sx,
  children,
  noinputs = false,
}: Props) {
  const quiz = useCurrentQuiz();

  if (!quiz) return null;

  return (
    <Box
      sx={{
        padding: "20px",
        display: "flex",
        flexDirection: "column",
        gap: "20px",
      }}
    >
      {!noinputs && (
        <>
          <Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
            <Typography>Название поля</Typography>
            <CustomTextField
              onChange={({ target }) => {
                updateQuiz(quiz.id, (quiz) => {
                  quiz.config.formContact.fields[defaultValue].text =
                    target.value;
                });
              }}
              value={quiz.config.formContact.fields[defaultValue].text}
              placeholder={placeholderHelp}
              text={""}
              maxLength={150}
            />
          </Box>
          <Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
            <Typography>Подсказка внутри поля</Typography>
            <CustomTextField
              onChange={({ target }) => {
                updateQuiz(quiz.id, (quiz) => {
                  quiz.config.formContact.fields[defaultValue].innerText =
                    target.value;
                });
              }}
              value={quiz.config.formContact.fields[defaultValue].innerText}
              placeholder={placeholderField}
              text={""}
              maxLength={150}
            />
          </Box>
        </>
      )}
      {children}
      <Button
        onClick={() => {
          updateQuiz(quiz.id, (quiz) => {
            quiz.config.formContact.fields[defaultValue].used = true;
          });
          closeDrawer();
        }}
        variant="contained"
        sx={{ maxWidth: "125px" }}
      >
        Добавить
      </Button>
    </Box>
  );
}
