import BaseButton from '@/components/ui-kit/BaseButton';
import BaseInput from '@/components/ui-kit/BaseInput';
import BaseModal from '@/components/ui-kit/BaseModal';
import { Customer } from '@/data/customers/customer.model';
import { customer_requests } from '@/data/customers/customer.requests';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { notifyUnknownError } from '@/services/notification';
import { Box, Grid, Stack, Typography } from '@mui/material';
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';

type Props = {
    onClose: () => void;
    onSuccess: () => void;
};

const CreateClientModal = ({ onClose, onSuccess }: Props) => {
    const t = useMyTranslation();
    const [loading, setLoading] = useState(false);
    const { register, handleSubmit } = useForm({
        defaultValues: {
            fullName: '',
            phone: '',
            address: '',
            pinfl: '',
            passport: '',
            dateOfBirth: '',
        },
    });

    const onSubmit = handleSubmit(async values => {
        try {
            setLoading(true);
            const body = {
                fullName: values.fullName,
                phone: values.phone,
                address: values.address,
                pinfl: values.pinfl,
                passport: values.passport,
                dateOfBirth: values.dateOfBirth,
            };

            const response = await customer_requests.create(body);
            onSuccess();
        } catch (error) {
            notifyUnknownError(error);
        } finally {
            setLoading(false);
        }
    });

    return (
        <BaseModal maxWidth='600px' onClose={onClose} open>
            <Box component={'form'} onSubmit={onSubmit}>
                <Typography variant='h5' mb={3}>
                    {t('create_client')}
                </Typography>
                <Grid container spacing={2} mb={2}>
                    <Grid item xs={6}>
                        <Typography fontWeight={700} mb={1}>
                            {t('fullName')}
                        </Typography>
                        <BaseInput {...register('fullName', { required: true })} fullWidth />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography fontWeight={700} mb={1}>
                            {t('phone')}
                        </Typography>
                        <BaseInput {...register('phone', { required: true })} fullWidth />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography fontWeight={700} mb={1}>
                            {t('pinfl')}
                        </Typography>
                        <BaseInput {...register('pinfl', { required: true })} fullWidth />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography fontWeight={700} mb={1}>
                            {t('passportSeries')}
                        </Typography>
                        <BaseInput {...register('passport', { required: true })} fullWidth />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography fontWeight={700} mb={1}>
                            {t('address')}
                        </Typography>
                        <BaseInput {...register('address', { required: true })} fullWidth />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography fontWeight={700} mb={1}>
                            {t('date_of_birth')}
                        </Typography>
                        <BaseInput {...register('dateOfBirth', { required: true })} fullWidth />
                    </Grid>
                </Grid>
                <Stack direction={'row'} justifyContent={'flex-end'}>
                    <BaseButton loading={loading} type='submit'>
                        {t('create')}
                    </BaseButton>
                </Stack>
            </Box>
        </BaseModal>
    );
};

export default CreateClientModal;
