import { useEffect, useState } from 'react';
import {
    Box,
    Button,
    Divider,
    FormControl,
    FormLabel,
    IconButton,
    Stack,
    Select,
    MenuItem,
    Autocomplete,
    TextField,
} from '@mui/material';
import {
    ModalBackdrop,
    ModalContainer,
    HeaderContainer,
    ModalTitle,
} from '../../common/Modal/ModalStyled';
import { Cancel } from '../../common/icons/icons';
import { DictVspApi } from '../../../api/dict-vsp';
import { toast } from 'react-toastify';
import { ExpenseItemApi } from '../../../api/expense-item';
import { DangerOutlinedButton, PrimaryButton } from '../../common/Buttons/Buttons';
import { StyledTextField } from '../../common/StyledTextField';

export const CreateProgramModal = ({
    isOpen,
    onClose,
    onCreate,
    title = '',
    isSaving = false,
    sheet,
}) => {
    const [name, setName] = useState('');

    useEffect(() => {
        if (!isOpen) {
            setName('');
        }
    }, [isOpen])

    const handleCancel = () => {
        setName('');
        onClose();
    };

    const handleBackdropClick = (e) => {
        if (e.target === e.currentTarget) {
            handleCancel();
        }
    };

    const handleSave = () => {
        onCreate?.(name);
        onClose();
    };

    const isFormValid = name !== '';

    if (!isOpen) return null;

    return (
        <ModalBackdrop isOpen={isOpen} onClick={handleBackdropClick}>
            <ModalContainer height={'max-content'} >
                <HeaderContainer>
                    <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
                        <ModalTitle>{title}</ModalTitle>
                    </Stack>
                    <IconButton size="small" onClick={handleCancel}>
                        <Cancel />
                    </IconButton>
                </HeaderContainer>

                <Box>
                    <Divider sx={{ marginBottom: '0.75rem' }} />


                    {/* <Input */}
                    <StyledTextField label={'Название программы'} onChange={(e) => setName(e.target.value)}></StyledTextField>
                    <Stack
                        direction="row"
                        spacing={0.75}
                        sx={{
                            justifyContent: 'flex-end',
                            marginTop: '1.5rem',
                            width: '100%',
                        }}
                    >
                        <DangerOutlinedButton
                            onClick={handleCancel}
                            disabled={isSaving}
                        >
                            Отмена
                        </DangerOutlinedButton>

                        <PrimaryButton
                            onClick={handleSave}
                            disabled={!isFormValid || isSaving}
                            loading={isSaving}>
                            Создать
                        </PrimaryButton>

                    </Stack>
                </Box>
            </ModalContainer>
        </ModalBackdrop>
    );
};