frontPanel/src/pages/ContactFormPage/NewField/WindowNewField.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 { FieldSettingsDrawerState, FormContactFieldName } from "@model/quizSettings";
import CloseIcon from '@mui/icons-material/Close';
import { Typography, useTheme } from "@mui/material";
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import { useCurrentQuiz } from '@root/quizes/hooks';
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { useEffect, useState } from 'react';
import SwitchNewField from "./SwitchNewField";


interface Props {
    drawerState: FieldSettingsDrawerState;
    closeDrawer: () => void;
}

export default function WindowNewField({ drawerState, closeDrawer }: Props) {
    const quiz = useCurrentQuiz();
    const theme = useTheme();
    const [switchState, setSwitchState] = useState("");

    useEffect(() => {
        if (!quiz) return;

        if (drawerState.isEdit) {
            return setSwitchState(drawerState.field);
        }

        for (let val in quiz.config.formContact.fields) {
            if (!quiz.config.formContact.fields[val as FormContactFieldName].used) {
                setSwitchState(val);
                return;
            }
        }
    }, []);

    if (!quiz) return null;

    const SSHC = (data: string) => {
        setSwitchState(data);
    };

    const buttonSetting: { icon: JSX.Element; title: string; value: FormContactFieldName; }[] = [
        { icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Имя', value: 'name' },
        { icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Email', value: 'email' },
        { icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Телефон', value: 'phone' },
        { icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Текст', value: 'text' },
        { icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Адрес', value: 'address' },
    ];

    return (
        <>
            <Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}>
                <Typography>Новое поле</Typography>
                <Button onClick={closeDrawer} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
            </Box>
            <Box sx={{
                padding: '20px',
                display: 'flex',
                gap: '10px'
            }}>
                {buttonSetting.flatMap((e, i) => (
                    drawerState.field === e.value || drawerState.field === "all"
                        ? <MiniButtonSetting
                            disabled={quiz.config.formContact.fields[e.value].used}
                            key={i}
                            onClick={() => { SSHC(e.value); }}
                            sx={{
                                backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
                                color: switchState === e.value && drawerState.field === "all" ? '#ffffff' : theme.palette.grey3.main,
                            }}
                        >
                            {e.icon}
                            {e.title}
                        </MiniButtonSetting>
                        : []
                ))}
            </Box>
            <SwitchNewField switchState={switchState} closeDrawer={closeDrawer} />
        </>
    );
}