import Button from '@/components/Button'
import DefaulModal from '@/components/DefaulModal'
import Input from '@/components/Input'
import Select from '@/components/Select'
import { useState, type FC } from 'react'
import type { CreateCancelReasonType } from '../types/Types'
import { useCreateCancelReason } from '../hooks/useOrderData'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useGetFines } from '@/pages/payment/hooks/usePaymentData'

const ModalCreateCancelReason: FC = () => {

    const [open, setOpen] = useState<boolean>(false)
    const createCancelReasonMutation = useCreateCancelReason()
    const { data: finesData } = useGetFines()

    const formik = useFormik<CreateCancelReasonType>({
        initialValues: {
            fineRule: '',
            title: '',
        },
        validationSchema: Yup.object({
            fineRule: Yup.string().required('انتخاب قانون جریمه الزامی است'),
            title: Yup.string().required('عنوان دلیل کنسلی الزامی است'),
        }),
        onSubmit: async (values) => {
            try {
                await createCancelReasonMutation.mutateAsync(values)
                setOpen(false)
                formik.resetForm()
            } catch (error) {
                console.error('خطا در ایجاد دلیل کنسلی:', error)
            }
        },
    })

    return (
        <div>
            <Button
                label='افزودن دلیل کنسلی'
                onClick={() => setOpen(true)}
                className='w-fit px-5 whitespace-nowrap'
            />
            <DefaulModal
                open={open}
                close={() => setOpen(false)}
                title_header='افزودن دلیل کنسلی'
                isHeader
            >
                <form onSubmit={formik.handleSubmit} className='space-y-4 w-[400px] mt-6'>
                    <Input
                        label='عنوان دلیل کنسلی'
                        placeholder='عنوان دلیل کنسلی را وارد کنید'
                        name='title'
                        value={formik.values.title}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : undefined}
                    />

                    <Select
                        label='قانون جریمه'
                        placeholder='قانون جریمه را انتخاب کنید'
                        name='fineRule'
                        value={formik.values.fineRule}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        error_text={formik.touched.fineRule && formik.errors.fineRule ? formik.errors.fineRule : undefined}
                        items={finesData?.results?.fineRules?.map(fine => ({
                            value: fine._id,
                            label: `${fine.title} (${fine.fine_percentage}%)`
                        })) || []}
                    />

                    <div className='flex gap-2 pt-4'>
                        <Button
                            type='submit'
                            label={createCancelReasonMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
                            disabled={createCancelReasonMutation.isPending}
                            className='flex-1'
                        />
                        <Button
                            type='button'
                            label='لغو'
                            variant='outline'
                            onClick={() => setOpen(false)}
                            className='flex-1'
                        />
                    </div>
                </form>
            </DefaulModal>
        </div>
    )
}

export default ModalCreateCancelReason