import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import NameIcon from "@icons/ContactFormIcon/NameIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import TextIcon from "@icons/ContactFormIcon/TextIcon";
import {
  FieldSettingsDrawerState,
  FormContactFieldName,
} from "@model/quizSettings";
import CloseIcon from "@mui/icons-material/Close";
import { Typography, useTheme } from "@mui/material";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { useCurrentQuiz } from "@root/quizes/hooks";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { useEffect, useState } from "react";
import SwitchNewField from "./SwitchNewField";

interface Props {
  drawerState: FieldSettingsDrawerState;
  closeDrawer: () => void;
}

export default function WindowNewField({ drawerState, closeDrawer }: Props) {
  const quiz = useCurrentQuiz();
  const theme = useTheme();
  const [switchState, setSwitchState] = useState("");

  useEffect(() => {
    if (!quiz) return;

    if (drawerState.isEdit) {
      return setSwitchState(drawerState.field);
    }

    for (let val in quiz.config.formContact.fields) {
      if (!quiz.config.formContact.fields[val as FormContactFieldName].used) {
        setSwitchState(val);
        return;
      }
    }
  }, []);

  if (!quiz) return null;

  const SSHC = (data: string) => {
    setSwitchState(data);
  };

  const buttonSetting: {
    icon: JSX.Element;
    title: string;
    value: FormContactFieldName;
  }[] = [
    {
      icon: (
        <NameIcon
          color={switchState === "name" ? "#ffffff" : theme.palette.grey3.main}
        />
      ),
      title: "Имя",
      value: "name",
    },
    {
      icon: (
        <EmailIcon
          color={switchState === "email" ? "#ffffff" : theme.palette.grey3.main}
        />
      ),
      title: "Email",
      value: "email",
    },
    {
      icon: (
        <PhoneIcon
          color={switchState === "phone" ? "#ffffff" : theme.palette.grey3.main}
        />
      ),
      title: "Телефон",
      value: "phone",
    },
    {
      icon: (
        <TextIcon
          color={switchState === "text" ? "#ffffff" : theme.palette.grey3.main}
        />
      ),
      title: "Текст",
      value: "text",
    },
    {
      icon: (
        <AddressIcon
          color={
            switchState === "address" ? "#ffffff" : theme.palette.grey3.main
          }
        />
      ),
      title: "Адрес",
      value: "address",
    },
  ];

  return (
    <>
      <Box
        sx={{
          padding: "10px 10px 10px 20px",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          background: theme.palette.background.default,
        }}
      >
        <Typography>Новое поле</Typography>
        <Button onClick={closeDrawer} sx={{ padding: 0 }}>
          <CloseIcon fontSize="large" />
        </Button>
      </Box>
      <Box
        sx={{
          padding: "20px",
          display: "flex",
          gap: "10px",
          flexWrap: "wrap"
        }}
      >
        {buttonSetting.flatMap((e, i) =>
          drawerState.field === e.value || drawerState.field === "all" ? (
            <MiniButtonSetting
              disabled={quiz.config.formContact.fields[e.value].used}
              key={i}
              onClick={() => {
                SSHC(e.value);
              }}
              sx={{
                backgroundColor:
                  switchState === e.value
                    ? theme.palette.brightPurple.main
                    : "transparent",
                color:
                  switchState === e.value && drawerState.field === "all"
                    ? "#ffffff"
                    : theme.palette.grey3.main,
              }}
            >
              {e.icon}
              {e.title}
            </MiniButtonSetting>
          ) : (
            []
          ),
        )}
      </Box>
      <SwitchNewField switchState={switchState} closeDrawer={closeDrawer} />
    </>
  );
}