import { Box, Typography, Button, Paper, TextField, Link, InputAdornment } from "@mui/material";
import NameIcon from "@icons/ContactFormIcon/NameIcon";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import TextIcon from "@icons/ContactFormIcon/TextIcon";
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";

import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { useState } from "react";
import { useQuestionsStore } from "@root/quizData/store";

import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";

type ContactFormProps = {
  currentQuestion: AnyTypedQuizQuestion;
  showResultForm: boolean;
  setShowContactForm: (show: boolean) => void;
  setShowResultForm: (show: boolean) => void;
};

const icons = [
  { type: "name", icon: NameIcon, defaultText: "Введите имя", defaultTitle: "имя" },
  { type: "email", icon: EmailIcon, defaultText: "Введите Email", defaultTitle: "Email" },
  { type: "phone", icon: PhoneIcon, defaultText: "Введите номер телефона", defaultTitle: "номер телефона" },
  { type: "text", icon: TextIcon, defaultText: "Введите фамилию", defaultTitle: "фамилию" },
  { type: "address", icon: AddressIcon, defaultText: "Введите адрес", defaultTitle: "адрес" },
]

export const ContactForm = ({
  currentQuestion,
  showResultForm,
  setShowContactForm,
  setShowResultForm,
}: ContactFormProps) => {
  const { settings } = useQuestionsStore()

  const [ready, setReady] = useState(false)

  const followNextForm = () => {
    setShowContactForm(false);
    setShowResultForm(true);
  };

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh"
      }}
    >
      <Box
        sx={{
          width: "800px"
        }}
      >

        <Box>
          <Typography
            sx={{
              textAlign: "center",
              m: "20px 0",
              fontSize: "28px"
            }}
          >
            {settings?.cfg.formContact.title || "Заполните форму, чтобы получить результаты теста"}
            
          </Typography>
          {
            settings?.cfg.formContact.desc &&
          <Typography
            sx={{
              textAlign: "center",
              m: "20px 0",
              fontSize: "18px"
            }}
          >
            {settings?.cfg.formContact.desc}
          </Typography>
          }
        </Box>


        <Paper
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
            p: "30px"
          }}>

          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              my: "20px"
            }}
          >
            <Inputs />

          </Box>

          {
            (
              <Button
                disabled={!ready}
                variant="contained" onClick={() => {
                  if (settings?.cfg.resultInfo.when === "after") followNextForm()
                }}>
                Получить результаты
              </Button>
            )}

          <Box
            sx={{
              display: "flex",
              mt: "20px",
              width: "450px",
            }}
          >
            <CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} />
            <Typography>
              С
              <Link> Положением об обработке персональных данных </Link>
              и
              <Link> Политикой конфиденциальности </Link>
              ознакомлен
            </Typography>

          </Box>
        </Paper>
      </Box >
    </Box >
  );
};

const Inputs = () => {
  const { settings } = useQuestionsStore()

  let someUsed:any = []

  const Icons = icons.map((data) => {
    //@ts-ignore
    const FC:any = settings?.cfg.formContact[data.type]
    if (FC.used) someUsed.push(<CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />)
    return <CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />
  })

  if (someUsed.length) {
    return <>{someUsed}</>
  } else {
    return <>
    {Icons[0]}
    {Icons[1]}
    {Icons[2]}
    </>
  }
}

const CustomInput = ({ title, desc, Icon }: any) => {
  return <Box m="15px 0">
    <Typography mb="7px">{title}</Typography>
    <TextField
      sx={{
        width: "350px",
      }}
      placeholder={desc}
      InputProps={{
        startAdornment: <InputAdornment position="start"><Icon color="gray" /></InputAdornment>,
      }}
    />
  </Box>
}