/* eslint-disable @next/next/no-img-element */
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 { UploadFile } from '@mui/icons-material';
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 AddPhotosModal = ({ onClose, open, onSuccess, item }: Props) => {
    const t = useMyTranslation();
    const [loading, setLoading] = useState(false);

    const {
        register,
        handleSubmit,
        setValue,
        watch,
        formState: { errors },
    } = useForm<{
        file: any;
        summa: number;
        weight: number;
    }>({
        defaultValues: {
            summa: 0,
            weight: 0,
        },
    });
    const fileValue = watch('file');
    const fileUrl = fileValue ? URL.createObjectURL(fileValue) : '';

    const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
        if (event.target.files?.[0]) {
            setValue('file', event.target.files?.[0]);
        }
    };

    const onSubmit = handleSubmit(async values => {
        try {
            setLoading(true);

            const formdata = new FormData();

            formdata.append('file', values.file);

            await item_requests.addPhotos({ itemId: item.id, weight: values.weight, summa: values.summa }, formdata);
            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('add_photo_to_item')}</Typography>

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

                    <Grid item xs={12}>
                        <Typography className='label'>{t('photo')}</Typography>
                        <Box
                            mb={1}
                            component={'label'}
                            sx={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                border: '1px solid #3389E4',
                                borderRadius: '12px',
                                minHeight: '120px',
                                cursor: 'pointer',
                            }}
                        >
                            <UploadFile color='primary' />
                            <input
                                type='file'
                                className='visually-hidden'
                                onChange={onChangeFile}
                                accept='.jpeg, .jpg, .png, .webp, .jfif'
                            />
                        </Box>
                        {fileUrl && (
                            <img
                                src={fileUrl}
                                style={{
                                    margin: '0 auto',
                                    maxWidth: '300px',
                                    width: '100%',
                                    height: 'auto',
                                    display: 'block',
                                }}
                                alt=''
                            />
                        )}
                    </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 AddPhotosModal;
