import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import { Typography, useTheme } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import ButtonsNewField from "./ButtonsNewField";
import SwitchNewField from "./SwitchNewField";
import { useCurrentQuiz } from '@root/quizes/hooks';


export default function WindowNewField({ type, drawerNewFieldHC }: { type: string, drawerNewFieldHC: (a: string) => void }) {
    const quiz = useCurrentQuiz()
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState("");
    React.useEffect(() => {
        for (let val in quiz?.config.formContact) {
            console.log(quiz?.config.formContact)
            console.log(quiz?.config.formContact[val])
            console.log(quiz?.config.formContact[val].used)
            if (!quiz?.config.formContact[val].used) {
                setSwitchState(val)
                return
            }
        }
    }, [])

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

    console.log(switchState)

    return (
        <>
            <Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}>
                <Typography>Новое поле</Typography>
                <Button onClick={() => drawerNewFieldHC("")} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
            </Box>

            <Box><ButtonsNewField type={type} switchState={switchState} SSHC={SSHC} /></Box>
            <SwitchNewField switchState={switchState} drawerNewFieldHC={drawerNewFieldHC} />
        </>
    )
}