import { type FC } from 'react'
import { useCreateReportCategory } from '../hooks/useReportData';
import DefaulModal from '@/components/DefaulModal';
import Input from '@/components/Input';
import Button from '@/components/Button';
import { TickCircle } from 'iconsax-react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { toast } from 'react-toastify';
import type { ErrorType } from '@/helpers/types';
import { extractErrorMessage } from '@/helpers/utils';

const CreateReportCategoryModal: FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
    const createReportCategoryMutation = useCreateReportCategory();

    const formik = useFormik({
        initialValues: {
            title: '',
        },
        validationSchema: Yup.object({
            title: Yup.string().required('عنوان دسته‌بندی الزامی است'),
        }),
        onSubmit: async (values) => {
            createReportCategoryMutation.mutate(values, {
                onSuccess: () => {
                    toast.success('دسته‌بندی گزارش با موفقیت ایجاد شد');
                    onClose();
                    formik.resetForm();
                },
                onError: (error: ErrorType) => {
                    toast.error(extractErrorMessage(error));
                }
            });
        },
    });

    const handleClose = () => {
        onClose();
        formik.resetForm();
    };

    return (
        <DefaulModal
            open={isOpen}
            close={handleClose}
            isHeader={true}
            title_header="افزودن دسته‌بندی گزارش"
            width={500}
        >
            <div className='mt-4 w-[400px]'>
                <form onSubmit={formik.handleSubmit} className='space-y-6'>
                    <Input
                        label='عنوان دسته‌بندی'
                        placeholder='عنوان دسته‌بندی را وارد کنید...'
                        {...formik.getFieldProps('title')}
                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                    />

                    <div className='flex justify-end gap-3'>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={handleClose}
                            className='px-6'
                        >
                            لغو
                        </Button>
                        <Button
                            type="submit"
                            isLoading={createReportCategoryMutation.isPending}
                            disabled={!formik.isValid || createReportCategoryMutation.isPending}
                            className='px-6'
                        >
                            <div className='flex gap-2 items-center'>
                                <TickCircle size={16} color='#fff' />
                                <div>ذخیره</div>
                            </div>
                        </Button>
                    </div>
                </form>
            </div>
        </DefaulModal>
    );
};

export default CreateReportCategoryModal
