frontPanel/src/pages/ContactFormPage/ContactFormPage.tsx

import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme, Popover, useMediaQuery, Divider } from "@mui/material";
import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import React, { ReactNode, useRef, useState } from "react";
import Info from "../../assets/icons/Info";
import Trash from "@icons/trash";
import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { decrementCurrentStep } from "@root/quizes/actions";
import ButtonSettingForms from "./ButtonSettingForms";
import DrawerNewField from "./DrawerParent";
import WindowMessengers from "./Massengers/WindowMessengers";
import WindowNewField from "./NewField/WindowNewField";
import SwitchContactForm from "./switchContactForm";
import GearIcon from "@icons/GearIcon";
import { useQuestionsStore } from "@root/questions/store";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { FieldSettingsDrawerState, FormContactFieldName } from "@model/quizSettings";


const buttons: { key: FormContactFieldName, name: string, desc: string; }[] = [
    { name: "Имя", desc: "Дмитрий", key: "name" },
    { name: "Email", desc: "mail@example.ru", key: "email" },
    { name: "Номер", desc: "+7 900 000 00 00", key: "phone" },
    { name: "Фамилия", desc: "Иванов", key: "text" },
    { name: "Адрес", desc: "Москва, Лаврушинский пер., 10", key: "address" },
];

export default function ContactFormPage() {
    const theme = useTheme();
    const quiz = useCurrentQuiz();
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const [drawerNewField, setDrawerNewField] = useState<FieldSettingsDrawerState>({ field: "", isEdit: false });
    const [drawerMessenger, setDrawerMessenger] = useState(false);

    const drawerMessengerHC = (bool: boolean) => {
        setDrawerMessenger(bool);
    };

    return (
        <Box sx={{
            p: isTablet ? "0 0 150px 0" : "0"
        }}>
            <Box sx={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
                m: "67px 0 41px 0",
            }}>
                <Link
                    sx={{
                        fontSize: "16px",
                        lineHeight: "19px",
                        color: theme.palette.brightPurple.main,
                        textDecorationColor: theme.palette.brightPurple.main,

                    }}
                >
                    Как собрать данные посетителя
                </Link>{" "}
                {/* <Popover>
          <Info />
        </Popover> */}
            </Box>
            {
                !quiz?.config.formContact.fields.name.used &&
                    !quiz?.config.formContact.fields.email.used &&
                    !quiz?.config.formContact.fields.phone.used &&
                    !quiz?.config.formContact.fields.text.used &&
                    !quiz?.config.formContact.fields.address.used ?
                    <ContactFormParent>
                        <EmptyCard drawerNewFieldHC={setDrawerNewField} />
                    </ContactFormParent>
                    :
                    <ContactFormParent>
                        <ButtonsCard drawerNewFieldHC={setDrawerNewField} />
                    </ContactFormParent>
            }
            <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
                <Box sx={{ display: "flex", gap: "8px" }}>
                    <Button
                        onClick={decrementCurrentStep}
                        variant="outlined">
                        <ArrowLeft />
                    </Button>
                    <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
                        Установка quiz
                    </Button>
                </Box>
            </Box>
            <DrawerNewField isOpenDrawer={drawerNewField.field} drawerNewFieldHC={() => setDrawerNewField({ field: "", isEdit: false })}>
                <WindowNewField drawerState={drawerNewField} closeDrawer={() => setDrawerNewField({ field: "", isEdit: false })} />
            </DrawerNewField>
        </Box>
    );
}

interface Props {
    outerContainerSx?: SxProps<Theme>;
    children?: ReactNode;
}

function ContactFormParent({ outerContainerSx: sx, children }: Props) {
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const quiz = useCurrentQuiz();

    if (!quiz) return null;

    return (
        <Paper
            sx={{
                maxWidth: "796px",
                width: "100%",
                borderRadius: "12px",
                margin: "20px 0",
                display: "flex",
            }}
        >
            <Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
                <Box
                    sx={{
                        // borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
                        maxWidth: "386px",
                        width: "100%",
                        padding: "100px 20px 20px 20px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "20px",
                    }}
                >
                    <CustomTextField
                        onChange={({ target }) => {
                            updateQuiz(quiz.id, (quiz) => {
                                quiz.config.formContact.title = target.value;
                            });
                        }}
                        value={quiz.config.formContact.title}
                        placeholder="Заголовок формы" text={""} />
                    <TextField

                        onChange={({ target }) => {
                            updateQuiz(quiz.id, (quiz) => {
                                quiz.config.formContact.desc = target.value;
                            });
                        }}
                        value={quiz.config.formContact.desc}
                        id="outlined-multiline-static"
                        multiline
                        rows={8}
                        placeholder="Дополнительный текст формы"
                        sx={{
                            backgroundColor: theme.palette.background.default,

                            "& .MuiInputBase-root": {
                                borderRadius: "10px",
                                alignItems: "start",
                                color: theme.palette.grey2.main,
                                color: "black",
                            },
                        }}
                    />
                </Box>
                <Divider sx={{
                    height: isTablet ? "1px" : "80%",
                    width: isTablet ? "80%" : "1px",
                    margin: "auto"
                }}
                    orientation={isTablet ? "horizontal" : "vertical"}
                />
                {children}
            </Box>
        </Paper>
    );
}


const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: FormContactFieldName; drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
    const theme = useTheme();
    const quiz = useCurrentQuiz();

    if (!quiz) return null;

    return (
        <>
            <Typography>{quiz.config.formContact.fields[type].text || name}</Typography>
            <Box
                sx={{ display: "flex", mb: "10px" }}
            >
                <Typography
                    sx={{
                        color: quiz.config.formContact.fields[type].innerText ? "black" : "#9A9AAF",
                        fontSize: "20px",
                        backgroundColor: theme.palette.background.default,
                        height: "48px",
                        borderRadius: "10px",
                        border: "1px #9A9AAF solid",
                        lineHeight: "21px",
                        p: " 0 25px 0 14px ",
                        display: "flex",
                        alignItems: "center",
                        width: "100%",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        position: "relative"
                    }}
                >
                    {quiz.config.formContact.fields[type].innerText || placeholder}
                    <IconButton
                        onClick={() => drawerNewFieldHC({ field: type, isEdit: true })}
                        sx={{
                            position: "absolute",
                            right: "0"
                        }}>
                        <GearIcon height="20px" width="20px" color="#7e2aea" />
                    </IconButton>
                </Typography>
                <IconButton
                    onClick={() => updateQuiz(quiz?.id, (quiz) => {
                        quiz.config.formContact.fields[type].used = false;
                    })}
                    sx={{
                        width: "48px",
                        ml: "5px"
                    }}
                >
                    <Trash />

                </IconButton>
            </Box>
        </>
    );
};

const ButtonsCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
    const theme = useTheme();
    const quiz = useCurrentQuiz();

    if (!quiz) return null;

    return (
        <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
            {buttons.flatMap((contentData) => {
                const content = quiz.config.formContact.fields[contentData.key];
                return content.used ? (
                    <SettingField
                        drawerNewFieldHC={drawerNewFieldHC}
                        key={contentData.key}
                        type={contentData.key}
                        name={content.text || contentData.name}
                        placeholder={content.innerText || contentData.desc}
                    />
                ) : [];
            })}
            {(
                quiz.config.formContact.fields.name.used &&
                quiz.config.formContact.fields.email.used &&
                quiz.config.formContact.fields.phone.used &&
                quiz.config.formContact.fields.text.used &&
                quiz.config.formContact.fields.address.used
            ) ?
                <></>
                :
                <Button
                    onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
                    variant="contained"
                    sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
                >
                    Добавить поле +
                </Button>
            }
            {/* <Link
        component="button"
        // onClick={() => drawerMessengerHC(true)}
        sx={{
          fontSize: "16px",
          lineHeight: "19px",
          color: theme.palette.brightPurple.main,
          textDecorationColor: theme.palette.brightPurple.main,
          textAlign: "left",
        }}
      >
        Добавить мессенджеры
      </Link> */}

            <PseudoButton />
        </Box>
    );
};
const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
    const theme = useTheme();
    const [FC, setFC] = useState(false);
    const openFC = () => setFC(true);
    const closeFC = () => setFC(false);
    const popover = useRef(null);

    return (
        <Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
            <Button
                onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
                variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
                Добавить поле +
            </Button>
            <Box sx={{ display: "flex" }}>
                <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
                <Box ref={popover}>
                    <Info sx={{ ml: "6px", p: "0" }} onClick={openFC} />
                </Box>

                <Popover
                    open={FC}
                    onClose={closeFC}
                    anchorEl={popover.current}
                    anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'center',
                    }}
                    transformOrigin={{
                        vertical: 'top',
                        horizontal: 'center',
                    }}
                    disableRestoreFocus
                >
                    <Typography sx={{ m: "20px", textAlign: "center" }}>
                        Будут поля:<br></br> Имя, Email, Телефон
                    </Typography>

                </Popover>
            </Box>
            {/* <Link
        sx={{
          mt: "20px",
          fontSize: "16px",
          lineHeight: "19px",
          color: theme.palette.brightPurple.main,
          textDecorationColor: theme.palette.brightPurple.main,
        }}
      >
        Добавить мессенджеры
      </Link> */}
            <PseudoButton />
        </Box>
    );
};

const PseudoButton = () => {
    const quiz = useCurrentQuiz();

    if (!quiz) return null;

    return (
        <TextField
            onChange={({ target }) => {
                updateQuiz(quiz.id, (quiz) => {
                    quiz.config.formContact.button = target.value;
                });
            }}
            value={quiz.config.formContact.button}
            sx={{
                heigth: "44px",
                width: "190px",
                "& .MuiInputBase-root": {
                    backgroundColor: "#7E2AEA",
                    borderRadius: "8px",
                    color: "white",
                },
                "& .MuiInputBase-input": {
                    padding: "10px 20px",
                    textAlign: "center"
                },
                "& .MuiInputBase-input::placeholder": {
                    color: "white",
                    opacity: "1"
                }
            }}
            placeholder="Название кнопки"
        >
            {quiz.config.formContact.button || "Название кнопки"}
        </TextField>

    );
};