frontPanel/src/pages/ViewPublicationPage/ContactForm.tsx

import {
  Box,
  Typography,
  Button,
  Paper,
  TextField,
  Link,
  InputAdornment,
  useTheme,
  useMediaQuery,
} 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 { useCurrentQuiz } from "@root/quizes/hooks";
import { NameplateLogo } from "@icons/NameplateLogo";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { useState } from "react";
import { useQuestionsStore } from "@root/questions/store";

import { checkEmptyData } from "../ResultPage/cards/ResultCard";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import { modes } from "../../utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";

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 quiz = useCurrentQuiz();
  const mode = modes;
  const { questions } = useQuestionsStore();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const [ready, setReady] = useState(false);
  const followNextForm = () => {
    setShowContactForm(false);
    setShowResultForm(true);
  };

  const resultQuestion = questions.find((question) => {
    if (quiz?.config.haveRoot) {
      //ветвимся
      return (
        question.type === "result" &&
        question.content.rule.parentId === currentQuestion.content.id
      );
    } else {
      // не ветвимся
      return (
        question.type === "result" && question.content.rule.parentId === "line"
      );
    }
  });

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: theme.palette.background.default,
        height: "100vh",
      }}
    >
      <Box
        sx={{
          width: isMobile ? "330px" : "530px",
          borderRadius: "4px",
          overflow: "auto",
          height: "90vh",
        }}
      >
        <Box>
          <Typography
            sx={{
              textAlign: "center",
              m: "20px 0",
              fontSize: "28px",
              color: theme.palette.text.primary,
            }}
          >
            {quiz?.config.formContact.title ||
              "Заполните форму, чтобы получить результаты теста"}
          </Typography>
          {quiz?.config.formContact.desc && (
            <Typography
              sx={{
                color: theme.palette.text.primary,
                textAlign: "center",
                m: "20px 0",
                fontSize: "18px",
              }}
            >
              {quiz?.config.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 />
          </Box>

          {
            // resultQuestion &&
            // quiz?.config.resultInfo.when === "after" &&
            <Button
              disabled={!ready}
              variant="contained"
              onClick={() => {
                if (
                  (quiz?.config.resultInfo.when === "after" ||
                    quiz?.config.resultInfo.when === "email") &&
                  !checkEmptyData({ resultData: resultQuestion })
                ) {
                  setShowContactForm(false);
                  setShowResultForm(true);
                }
              }}
            >
              {quiz?.config.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",
                color: mode[quiz.config.theme] ? "#151515" : "#FFFFFF",
              }}
            />
            <Typography
              sx={{
                fontSize: "20px",
                color: mode[quiz.config.theme] ? "#4D4D4D" : "#F5F7FF",
                whiteSpace: "nowrap",
              }}
            >
              Сделано на PenaQuiz
            </Typography>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

const Inputs = (currentQuestion: any) => {
  const quiz = useCurrentQuiz();
  const { questions } = useQuestionsStore();

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

  //@ts-ignore
  const FC: any = quiz?.config.formContact.fields;

  //@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
      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 }: any) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  return (
    <Box m="15px 0">
      <Typography mb="7px" color={theme.palette.text.primary}>
        {title}
      </Typography>
      <TextField
        sx={{
          width: isMobile ? "300px" : "350px",
        }}
        placeholder={desc}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <Icon color="gray" />
            </InputAdornment>
          ),
        }}
      />
    </Box>
  );
};