frontAnswerer/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx

import { useEffect, useRef, useState } from "react";
import { Box, Button, Link, Typography, useTheme } from "@mui/material";
import { enqueueSnackbar } from "notistack";

import CustomCheckbox from "@ui_kit/CustomCheckbox";

import { Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs";
import { ContactTextBlock } from "./ContactTextBlock";

import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";

import { sendFC, SendFCParams } from "@api/quizRelase";

import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";

import { EMAIL_REGEXP } from "@utils/emailRegexp";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "@utils/designList";

import { NameplateLogo } from "@icons/NameplateLogo";

import type {
  FormContactFieldData,
  FormContactFieldName,
} from "@model/settingsData";
import type { QuizQuestionResult } from "@model/questionTypes/result";
import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";

type Props = {
  currentQuestion: AnyTypedQuizQuestion;
  onShowResult: () => void;
};

export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
  const theme = useTheme();
  const { settings, questions, quizId, show_badge, preview } = useQuizData();

  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 [screenHeight, setScreenHeight] = useState<number>(window.innerHeight);

  const fireOnce = useRef(true);
  const [fire, setFire] = useState(false);
  const isMobile = useRootContainerSize() < 850;
  const isTablet = useRootContainerSize() < 1000;

  const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
  const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);

  useEffect(() => {
    function handleResize() {
      setScreenHeight(window.innerHeight);
    }

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const resultQuestion =
    currentQuestion.type === "result"
      ? currentQuestion
      : questions.find((question): question is QuizQuestionResult => {
          if (settings?.cfg.haveRoot) {
            return (
              question.type === "result" &&
              question.content.rule.parentId === currentQuestion.content.id
            );
          } else {
            return (
              question.type === "result" &&
              question.content.rule.parentId === "line"
            );
          }
        });

  if (!resultQuestion) throw new Error("Result question not found");

  const inputHC = async () => {
    const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
    const body: SendFCParams["body"] = {};
    if (name.length > 0) body.name = name;
    if (email.length > 0) body.email = email;
    if (phone.length > 0) body.phone = phone;
    if (adress.length > 0) body.address = adress;
    if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text };

    if (Object.keys(body).length > 0) {
      try {
        await sendFC({
          questionId: currentQuestion.id,
          body: body,
          qid: quizId,
          preview,
        });

        const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
        localStorage.setItem(
          "sessions",
          JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
        );
      } catch (e) {
        enqueueSnackbar("ответ не был засчитан");
      }
    }
  };

  const FCcopy: Record<FormContactFieldName, FormContactFieldData> =
    settings.cfg.formContact.fields || settings.cfg.formContact;

  const filteredFC: Partial<
    Record<FormContactFieldName, FormContactFieldData>
  > = {};
  for (const i in FCcopy) {
    const field = FCcopy[i as keyof typeof FCcopy];
    if (field.used) {
      filteredFC[i as FormContactFieldName] = field;
    }
  }

  async function handleShowResultsClick() {
    const FC = settings.cfg.formContact.fields;
    if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
      return enqueueSnackbar("введена некорректная почта");
    }

    if (fireOnce.current) {
      if (
        name.length === 0 &&
        email.length === 0 &&
        phone.length === 0 &&
        text.length === 0 &&
        adress.length === 0
      )
        return enqueueSnackbar("Пожалуйста, заполните поля");

      //почта валидна, хоть одно поле заполнено
      setFire(true);
      try {
        await inputHC();
        fireOnce.current = false;
        const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
        sessions[quizId] = Date.now();
        localStorage.setItem("sessions", JSON.stringify(sessions));

        vkMetrics.contactsFormFilled();
        yandexMetrics.contactsFormFilled();
      } catch (e) {
        enqueueSnackbar("повторите попытку позже");
      }
      if (settings.cfg.resultInfo.showResultForm === "after") {
        onShowResult();
      }
    }

    setFire(false);
  }
  useEffect(() => {
    vkMetrics.contactsFormOpened();
    yandexMetrics.contactsFormOpened();
  }, []);

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: theme.palette.background.default,
        height: screenHeight > 500 ? "100%" : "auto",
        overflow: "auto",
        "&::-webkit-scrollbar": {
          width: "0",
          display: "none",
          msOverflowStyle: "none",
        },
        scrollbarWidth: "none",
        msOverflowStyle: "none",
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundImage:
          settings.cfg.design && !isMobile
            ? quizThemes[settings.cfg.theme].isLight
              ? `url(${DESIGN_LIST[settings.cfg.theme]})`
              : `linear-gradient(90deg, #272626, transparent), url(${
                  DESIGN_LIST[settings.cfg.theme]
                })`
            : null,
      }}
    >
      <Box
        sx={{
          width: !isMobile ? "100%" : isMobile ? undefined : "530px",
          borderRadius: "4px",
          height: isMobile ? "100%" : "auto",
          minHeight: "100%",
          display: isMobile ? undefined : "flex",
          background:
            settings.cfg.design && !isMobile
              ? undefined
              : theme.palette.background.default,
        }}
      >
        <ContactTextBlock settings={settings} />
        <Box
          sx={{
            flexGrow: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            flexDirection: "column",
            backgroundColor: theme.palette.background.default,
            height: "auto",
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: isMobile ? undefined : "center",
              justifyContent: "center",
              flexDirection: "column",
              p: isMobile
                ? "0 20px"
                : isTablet
                ? "0px 40px 30px 60px"
                : "125px 60px 30px 60px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                mt: isMobile ? "10px" : "20px",
                mb: "20px",
              }}
            >
              <Inputs
                name={name}
                setName={setName}
                email={email}
                setEmail={setEmail}
                phone={phone}
                setPhone={setPhone}
                text={text}
                setText={setText}
                adress={adress}
                setAdress={setAdress}
              />
            </Box>
            <Box
              sx={{
                display: "flex",
                width: isMobile ? "300px" : "390px",
              }}
            >
              <CustomCheckbox
                label=""
                handleChange={({ target }) => {
                  setReady(target.checked);
                }}
                checked={ready}
                colorIcon={theme.palette.primary.main}
                sx={{ marginRight: "0" }}
              />
              <Typography
                sx={{
                  color: theme.palette.text.primary,
                  lineHeight: "18.96px",
                }}
                fontSize={"16px"}
              >
                С&ensp;
                <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
                  Положением об обработке персональных данных{" "}
                </Link>
                &ensp;и&ensp;
                <Link
                  href={"https://shub.pena.digital/docs/privacy"}
                  target="_blank"
                >
                  {" "}
                  Политикой конфиденциальности{" "}
                </Link>
                &ensp;ознакомлен
              </Typography>
            </Box>

            <Button
              disabled={!(ready && !fire)}
              variant="contained"
              onClick={handleShowResultsClick}
              sx={{
                border: `1px solid ${theme.palette.primary.main}`,
                margin: isMobile ? "auto" : undefined,
                mt: "20px",
                p: "10px 20px",
                "&:disabled": {
                  border: "1px solid #9A9AAF",
                  color: "#9A9AAF",
                },
              }}
            >
              {settings.cfg.formContact?.button || "Получить результаты"}
            </Button>
          </Box>
          {show_badge && (
            <Box
              component={Link}
              target={"_blank"}
              href={`https://${
                window.location.hostname.includes("s") ? "s" : ""
              }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
              sx={{
                display: "flex",
                alignItems: "center",
                mt: "55px",
                mb: isMobile ? "30px" : isTablet ? "40px" : "50px",
                gap: "10px",
                textDecoration: "none",
              }}
            >
              <NameplateLogo
                style={{
                  fontSize: "20px",
                  color: quizThemes[settings.cfg.theme].isLight
                    ? "#151515"
                    : "#FFFFFF",
                }}
              />
            </Box>
          )}
        </Box>
      </Box>
    </Box>
  );
};