frontAnswerer/src/pages/ViewPublicationPage/ContactForm.tsx

import { Box, Typography, Button, useMediaQuery, TextField, Link, InputAdornment, useTheme } 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 { useDebouncedCallback } from "use-debounce";

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

import { checkEmptyData } from "./tools/checkEmptyData";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import { enqueueSnackbar } from "notistack";
import { sendFC } from "@api/quizRelase";
import { NameplateLogo } from "@icons/NameplateLogo";
import { modes } from "../../utils/themes/Publication/themePublication";
import { QuizQuestionResult } from "@model/questionTypes/result";
import { ApologyPage } from "./ApologyPage";



const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;

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

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

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

  const [ready, setReady] = useState(false)
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [text, setText] = useState("")
  const [adress, setAdress] = useState("")

  const fireOnce = useRef(true)
  const [fire, setFire] = useState(false)
  const isMobile = useMediaQuery(theme.breakpoints.down(850));

  const followNextForm = () => {
    setShowContactForm(false);
    setShowResultForm(true);
  };
  const mode = modes;
  //@ts-ignore
  const resultQuestion: QuizQuestionResult = items.find((question) => {
    if (settings?.cfg.haveRoot) { //ветвимся
      return (
        question.type === "result" &&
        //@ts-ignore
        question.content.rule.parentId === currentQuestion.content.id
      )
    } else {// не ветвимся
      return (
        question.type === "result" &&
        question.content.rule.parentId === "line"
      )
    }

  }
  );

  const inputHC = async () => {

    const body = {}
    //@ts-ignore
    if (name.length > 0) body.name = name
    //@ts-ignore
    if (email.length > 0) body.email = email
    //@ts-ignore
    if (phone.length > 0) body.phone = phone
    //@ts-ignore
    if (text.length > 0) body.text = text
    //@ts-ignore
    if (adress.length > 0) body.adress = adress

    if (Object.keys(body).length > 0) {
      try {
        await sendFC({
          questionId: resultQuestion?.id,
          body: body,
          //@ts-ignore
          qid: settings.qid
        })

      } catch (e) {
        enqueueSnackbar("ответ не был засчитан")
      }

    }
  }
  //@ts-ignore
  let FCcopy: any = settings?.cfg.formContact.fields || settings?.cfg.formContact;

  let filteredFC: any = {}
  for (let i in FCcopy) {
    let field = FCcopy[i]
      console.log(filteredFC)
    if (field.used) {
      filteredFC[i] = field
    }
  }
  let isWide = Object.keys(filteredFC).length > 2
  console.log(isWide)

  if (!resultQuestion) return <ApologyPage message="не получилось найти результат для этой ветки :(" />

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: theme.palette.background.default,
        height: "100vh",
        overflow: "auto",
        "&::-webkit-scrollbar": { width: "0", display: "none",  msOverflowStyle: "none" },
          scrollbarWidth: "none",
        msOverflowStyle: "none"
      }}
    >
      <Box
        sx={{
          width: isWide && !isMobile ? "100%" : (isMobile ? undefined : "530px"),
          borderRadius: "4px",
          height: "90vh",
          display: isWide && !isMobile ? "flex" : undefined
        }}
      >
        <Box
            sx={{
              width: isWide && !isMobile ? "100%" : undefined,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              borderRight: isWide && !isMobile ? "1px solid gray" : undefined
            }}
        >
          <Typography
            sx={{
              textAlign: "center",
              m: "20px 0",
              fontSize: "28px",
              color: theme.palette.text.primary
            }}
          >
            {settings?.cfg.formContact.title || "Заполните форму, чтобы получить результаты теста"}

          </Typography>
          {
            settings?.cfg.formContact.desc &&
            <Typography
              sx={{
                color: theme.palette.text.primary,
                textAlign: "center",
                m: "20px 0",
                fontSize: "18px"
              }}
            >
              {settings?.cfg.formContact.desc}
            </Typography>
          }
        </Box>


        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
            backgroundColor: theme.palette.background.default,
            p: "30px"
          }}>

          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              my: "20px"
            }}
          >
            <Inputs
              name={name} setName={setName}
              email={email} setEmail={setEmail}
              phone={phone} setPhone={setPhone}
              text={text} setText={setText}
              adress={adress} setAdress={setAdress}
            />


          </Box>

          {
            // resultQuestion &&
            // settings?.cfg.resultInfo.when === "after" && 
            (
              <Button
                disabled={!(ready && !fire)}
                variant="contained"
                onClick={async () => {
                  //@ts-ignore
                  const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact
                  if (FC["email"].used === EMAIL_REGEXP.test(email)) {//почта валидна
                    setFire(true)


                    if (fireOnce.current) {
                      if (
                        name.length > 0 ||
                        email.length > 0 ||
                        phone.length > 0 ||
                        text.length > 0 ||
                        adress.length > 0
                      ) {
  
                        try {
                          await inputHC()
                          fireOnce.current = false
                          enqueueSnackbar("Данные успешно отправлены")
                        } catch (e) {
                          enqueueSnackbar("повторите попытку позже")
                        }
  
                        if ((settings?.cfg.resultInfo.showResultForm === "after" || settings?.cfg.resultInfo.when === "email") && !checkEmptyData({ resultData: resultQuestion })) {
                          setShowContactForm(false)
                          setShowResultForm(true)
                        }
                      } else {
                        enqueueSnackbar("Пожалуйста, заполните поля")
                      }
                    }
  
                    setFire(false)
                  } else {
                      enqueueSnackbar("введена некорректная почта")
                    }
                  
                }}
              >
                {settings?.cfg.formContact?.button || "Получить результаты"}
              </Button>
            )}

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

          </Box>
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              mt: "20px",
              gap: "15px"
            }}
          >
            <NameplateLogo style={{
              fontSize: "34px",
              //@ts-ignore
              color: mode[settings.cfg.theme] ? "#151515" : "#FFFFFF"
            }} />
            <Typography sx={{
              fontSize: "20px",
              //@ts-ignore
              color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
            }}>
              Сделано на PenaQuiz
            </Typography>
          </Box>
        </Box>
      </Box >
    </Box >
  );
};

const Inputs = ({
  name, setName,
  email, setEmail,
  phone, setPhone,
  text, setText,
  adress, setAdress
}: any) => {
  const { settings, items } = useQuestionsStore()

  console.log("______________________EMAIL_REGEXP.test(email)")
  console.log(EMAIL_REGEXP.test(email))

  //@ts-ignore
  const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact

  //@ts-ignore
  const Name = <CustomInput onChange={({ target }) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} />
  //@ts-ignore
  const Email = <CustomInput 

  error = {!EMAIL_REGEXP.test(email)}
  label={!EMAIL_REGEXP.test(email) ? "" : "Некорректная почта"}
  //@ts-ignore
  onChange={({ target }) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} />
  //@ts-ignore
  const Phone = <CustomInput onChange={({ target }) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} />
  //@ts-ignore
  const Text = <CustomInput onChange={({ target }) => setText(target.value)} id={text} title={FC["text"].innerText || "Введите фамилию"} desc={FC["text"].text || "фамилию"} Icon={TextIcon} />
  //@ts-ignore
  const Adress = <CustomInput onChange={({ target }) => setAdress(target.value)} id={adress} title={FC["address"].innerText || "Введите адрес"} desc={FC["address"].text || "адрес"} Icon={AddressIcon} />

  //@ts-ignore
  if (Object.values(FC).some((data) => data.used)) {
    return <>
      {FC["name"].used ? Name : <></>}
      {FC["email"].used ? Email : <></>}
      {FC["phone"].used ? Phone : <></>}
      {FC["text"].used ? Text : <></>}
      {FC["address"].used ? Adress : <></>}
    </>
  } else {
    return <>
      {Name}
      {Email}
      {Phone}
    </>
  }
}

const CustomInput = ({ title, desc, Icon, onChange }: any) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  //@ts-ignore
  return <Box m="15px 0">
    <Typography mb="7px" color={theme.palette.text.primary}>{title}</Typography>

    <TextField
      onChange={onChange}
      sx={{
        width: isMobile ? "300px" : "350px",
      }}
      placeholder={desc}
      InputProps={{
        startAdornment: <InputAdornment position="start"><Icon color="gray" /></InputAdornment>,
      }}
    />
  </Box>
}