frontAnswerer/lib/components/ViewPublicationPage/ContactForm.tsx

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 {
    Box,
    Button,
    InputAdornment,
    Link,
    TextField as MuiTextField,
    TextFieldProps,
    Typography,
    useTheme
} from "@mui/material";

import CustomCheckbox from "@ui_kit/CustomCheckbox";
import { FC, useRef, useState } from "react";

import { DESIGN_LIST } from "@/utils/designList";
import { sendFC } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { NameplateLogo } from "@icons/NameplateLogo";
import { QuizQuestionResult } from "@model/questionTypes/result";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";


const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
const EMAIL_REGEXP = /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;

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 fireOnce = useRef(true);
    const [fire, setFire] = useState(false);
    const isMobile = useRootContainerSize() < 850;
    const isTablet = useRootContainerSize() < 1000;

    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 = {} as any;
        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: any = settings.cfg.formContact.fields || settings.cfg.formContact;

    const filteredFC: any = {};
    for (const i in FCcopy) {
        const field = FCcopy[i];
        if (field.used) {
            filteredFC[i] = field;
        }
    }
    

    async function handleShowResultsClick() {
        const FC: any = 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: any = JSON.parse(
                    localStorage.getItem("sessions") || "{}"
                );
                sessions[quizId] = Date.now();
                localStorage.setItem(
                    "sessions",
                    JSON.stringify(sessions)
                );
                enqueueSnackbar("Данные успешно отправлены");
            } catch (e) {
                enqueueSnackbar("повторите попытку позже");
            }
            if (settings.cfg.resultInfo.showResultForm === "after") {
                onShowResult();
            }

        }

        setFire(false);
    }

    return (
        <Box
            sx={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: theme.palette.background.default,
                height: "100%",
                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: "100%",
                    minHeight: "100%",
                    display: isMobile ? undefined : "flex",
                    background: settings.cfg.design && !isMobile ? undefined : theme.palette.background.default,
                }}
            >
                <Box
                    sx={{
                        width: isMobile ? undefined : "100%",
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        justifyContent: "center",
                        borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
                        margin: isMobile ? 0 : "40px 0"
                    }}
                >
                    <Box
                        sx={{
                            maxWidth: "630px",
                            width: "100%",
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "flex-start",
                            justifyContent: "center",
                            padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
                        }}
                    >
                        <Typography
                            sx={{
                                textAlign: isTablet ? undefined : "center",
                                m: "20px 0",
                                fontSize: isTablet ? "24px" : "28px",
                                lineHeight: "normal",
                                fontWeight: 501,
                                color: theme.palette.text.primary,
                                wordBreak: "break-word"
                            }}
                        >
                            {settings.cfg.formContact.title ||
                                "Заполните форму, чтобы получить результаты теста"}
                        </Typography>
                        {settings.cfg.formContact.desc && (
                            <Typography
                                sx={{
                                    color: theme.palette.text.primary,
                                    m: "20px 0",
                                    fontSize: "18px",
                                    wordBreak: "break-word"
                                }}
                            >
                                {settings.cfg.formContact.desc}
                            </Typography>
                        )}
                    </Box>

                </Box>

                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        flexDirection: "column",
                        backgroundColor: theme.palette.background.default,
                        p: isMobile ? "40px" : "125px 60px 30px 60px",
                    }}
                >
                    <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={handleShowResultsClick}
                            sx={{
                                border: `1px solid ${theme.palette.primary.main}`,
                                "&:disabled": {
                                    border: "1px solid #9A9AAF",
                                    color: "#9A9AAF"
                                }
                            }}
                        >
                            {settings.cfg.formContact?.button || "Получить результаты"}
                        </Button>
                    }

                    <Box
                        sx={{
                            display: "flex",
                            mt: "20px",
                            width: isMobile ? "300px" : "390px",
                        }}
                    >
                        <CustomCheckbox
                            label=""
                            handleChange={({ target }) => {
                                setReady(target.checked);
                            }}
                            checked={ready}
                            colorIcon={theme.palette.primary.main}
                        />
                        <Typography sx={{ color: theme.palette.text.primary }}>
                            С&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>
                    {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: "50px",
                                gap: "15px",
                                textDecoration: "none",
                            }}
                        >
                            <NameplateLogo
                                style={{
                                    fontSize: "23px",
                                    color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF",
                                }}
                            />
                            <Typography
                                sx={{
                                    fontSize: "14px",
                                    color: quizThemes[settings.cfg.theme].isLight ? "#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 } = useQuizData();

    const FC = settings.cfg.formContact.fields;

    if (!FC) return null;
    console.log(email);
    const Name = (
        <CustomInput
            onChange={({ target }) => setName(target.value)}
            id={name}
            title={FC["name"].innerText || "Введите имя"}
            desc={FC["name"].text || "Имя"}
            Icon={NameIcon}
        />
    );
    const Email = (
        <CustomInput
            onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ''))}
            id={email}
            title={FC["email"].innerText || "Введите Email"}
            desc={FC["email"].text || "Email"}
            Icon={EmailIcon}
        />
    );
    const Phone = (
        <CustomInput
            onChange={({ target }) => setPhone(target.value)}
            id={phone}
            title={FC["phone"].innerText || "Введите номер телефона"}
            desc={FC["phone"].text || "Номер телефона"}
            Icon={PhoneIcon}
        />
    );
    const Text = (
        <CustomInput
            onChange={({ target }) => setText(target.value)}
            id={text}
            title={FC["text"].text || "Введите фамилию"}
            desc={FC["text"].innerText || "Фамилия"}
            Icon={TextIcon}
        />
    );
    const Adress = (
        <CustomInput
            onChange={({ target }) => setAdress(target.value)}
            id={adress}
            title={FC["address"].innerText || "Введите адрес"}
            desc={FC["address"].text || "Адрес"}
            Icon={AddressIcon}
        />
    );

    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, id }: {
    id: string;
    title: string;
    desc: string;
    Icon: FC<{ color: string; backgroundColor: string; }>;
    onChange: TextFieldProps["onChange"];
}) => {
    const theme = useTheme();
    const isMobile = useRootContainerSize() < 600;
    const { settings } = useQuizData();
    return (
        <Box m="10px 0">
            <Typography mb="7px" color={theme.palette.text.primary}>
                {title}
            </Typography>

            <TextField
                onChange={onChange}
                sx={{
                    width: isMobile ? "300px" : "390px",
                    backgroundColor: theme.palette.background.default,
                    "& .MuiOutlinedInput-notchedOutline": {
                        borderColor: "#9A9AAF80",
                        borderRadius: "12px"
                    },
                    "& .MuiInputBase-root": {
                        paddingLeft: 0
                    },
                    '& .MuiOutlinedInput-root': {
                        '&:hover fieldset': {
                            borderColor: theme.palette.primary.main,
                        },
                    }

                }}
                placeholder={desc}
                InputProps={{
                    startAdornment: (
                        <InputAdornment position="start">
                            <Icon color="gray"
                                backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
                        </InputAdornment>
                    ),
                }}
            />
        </Box>
    );
};