cpost-front/src/components/common/AttachInvoiceModal/index.tsx

import BaseButton from '@/components/ui-kit/BaseButton';
import BaseModal from '@/components/ui-kit/BaseModal';
import BaseReactSelect from '@/components/ui-kit/BaseReactSelect';
import { box_requests } from '@/data/box/box.requests';
import { customer_requests } from '@/data/customers/customer.requests';
import { invoice_requests } from '@/data/invoice/invoice.requests';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import useRequest from '@/hooks/useRequest';
import { notifyUnknownError } from '@/services/notification';
import { Box, Stack, Typography, styled } from '@mui/material';
import React, { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';

const StyledBox = styled(Box)`
    .title {
        color: #000;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 28px;
    }

    .label {
        color: #5d5850;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        margin-bottom: 8px;
    }
`;

type Props = {
    onClose: () => void;
    open: boolean;
    onSuccess: () => void;
    defaultValues?: {
        clientId?: number;
        packetId?: number;
    };
};

const AttachInvoiceModal = ({ onClose, open, onSuccess, defaultValues }: Props) => {
    const t = useMyTranslation();
    const [loading, setLoading] = useState(false);

    const getClientsQuery = useRequest(() => customer_requests.getAll(), {
        selectData(data) {
            return data.data.data.data.map(i => ({ label: i.fullName, value: i.id }));
        },
    });

    const getBoxesQuery = useRequest(() => box_requests.getAll(), {
        selectData(data) {
            return data.data.data.data.map(i => ({ value: i.id, label: i.name }));
        },
    });

    const clientsList = getClientsQuery.data || [];
    const boxesList = getBoxesQuery.data || [];

    const {
        register,
        control,
        handleSubmit,
        formState: { errors },
    } = useForm<{
        clientId: number;
        packetId: number;
    }>({
        defaultValues: {
            ...defaultValues,
        },
    });

    const onSubmit = handleSubmit(async values => {
        try {
            setLoading(true);
            await invoice_requests.create({ ...values });
            onSuccess();
        } catch (error) {
            notifyUnknownError(error);
        } finally {
            setLoading(false);
        }
    });

    return (
        <BaseModal maxWidth='400px' onClose={onClose} open={open}>
            <StyledBox component={'form'} onSubmit={onSubmit}>
                <Typography className='title'>{t('create_invoice')}</Typography>

                <Stack spacing={3.5}>
                    <Box>
                        <Typography className='label'>{t('role')}</Typography>
                        <Controller
                            name='clientId'
                            control={control}
                            render={({ field, fieldState, formState }) => {
                                return (
                                    <BaseReactSelect
                                        value={clientsList.find(p => p.value === field.value)}
                                        onChange={(newValue: any) => {
                                            field.onChange(newValue.value);
                                        }}
                                        onBlur={field.onBlur}
                                        name={field.name}
                                        options={clientsList}
                                    />
                                );
                            }}
                        />
                    </Box>
                    <Box>
                        <Typography className='label'>{t('role')}</Typography>
                        <Controller
                            name='packetId'
                            control={control}
                            render={({ field, fieldState, formState }) => {
                                return (
                                    <BaseReactSelect
                                        value={boxesList.find(p => p.value === field.value)}
                                        onChange={(newValue: any) => {
                                            field.onChange(newValue.value);
                                        }}
                                        onBlur={field.onBlur}
                                        name={field.name}
                                        options={boxesList}
                                    />
                                );
                            }}
                        />
                    </Box>
                </Stack>

                <Stack direction={'row'} justifyContent={'flex-start'} alignItems={'center'} spacing={3}>
                    <BaseButton colorVariant='blue' type='submit' loading={loading}>
                        {t('create')}
                    </BaseButton>
                    <BaseButton variant='outlined' type='button' colorVariant='blue-outlined' disabled={loading} onClick={onClose}>
                        {t('cancel')}
                    </BaseButton>
                </Stack>
            </StyledBox>
        </BaseModal>
    );
};

export default AttachInvoiceModal;