import BaseButton from '@/components/ui-kit/BaseButton';
import BaseInput from '@/components/ui-kit/BaseInput';
import BaseModal from '@/components/ui-kit/BaseModal';
import BaseReactSelect from '@/components/ui-kit/BaseReactSelect';
import { Product } from '@/data/item/item.mode';
import { item_requests } from '@/data/item/item.requests';
import { staff_requests } from '@/data/staff/staff.requests';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { notifyUnknownError } from '@/services/notification';
import { Box, Grid, 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;
    item: Product;
};

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

    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<{
        cargoId: string;
        trekId: string;
        name: string;
        amount: number;
        weight: number;
    }>({
        defaultValues: {
            amount: item.amount,
            cargoId: item.cargoId,
            name: item.name,
            trekId: item.trekId,
            weight: item.weight,
        },
    });

    const onSubmit = handleSubmit(async values => {
        try {
            setLoading(true);
            await item_requests.update({ itemId: item.id, ...values });
            onSuccess();
        } catch (error) {
            notifyUnknownError(error);
        } finally {
            setLoading(false);
        }
    });

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

                <Grid container spacing={3} mb={3}>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('name')}</Typography>
                        <BaseInput error={!!errors.name} mainBorderColor='#D8D8D8' {...register('name', { required: true })} fullWidth />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('cargo_id')}</Typography>
                        <BaseInput
                            error={!!errors.cargoId}
                            mainBorderColor='#D8D8D8'
                            {...register('cargoId', { required: true })}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('track_id')}</Typography>
                        <BaseInput
                            error={!!errors.trekId}
                            mainBorderColor='#D8D8D8'
                            {...register('trekId', { required: true })}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('quantity')}</Typography>
                        <BaseInput
                            error={!!errors.amount}
                            mainBorderColor='#D8D8D8'
                            {...register('amount', { required: true })}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('weight')}</Typography>
                        <BaseInput
                            error={!!errors.weight}
                            inputProps={{
                                step: 0.1,
                            }}
                            type='number'
                            mainBorderColor='#D8D8D8'
                            {...register('weight', { required: true })}
                            fullWidth
                        />
                    </Grid>
                </Grid>

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

export default EditItemModal;
