'use client'
import React from 'react'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'
import Modal from '@/components/Modal'
import Select from '@/components/Select'
import Input from '@/components/Input'
import { Button } from '@/components/ui/button'

interface CancelOrderFormData {
    reason: string
    count: string
    description: string
}

interface CancelReason {
    _id: string
    title: string
}

interface CancelOrderModalProps {
    showModalCancel: boolean
    setShowModalCancel: (show: boolean) => void
    onSubmit: (data: CancelOrderFormData) => void
    isLoading: boolean
    cancelReasons?: Array<{ _id: string; title: string }>
}

const cancelOrderSchema = yup.object({
    reason: yup.string().required('دلیل لغو سفارش را انتخاب کنید'),
    count: yup.string().required('تعداد را وارد کنید'),
    description: yup.string().required('توضیحات را وارد کنید')
})

const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
    showModalCancel,
    setShowModalCancel,
    onSubmit,
    isLoading,
    cancelReasons = []
}) => {
    const {
        register,
        handleSubmit,
        watch,
        setValue,
        formState: { errors },
        reset
    } = useForm<CancelOrderFormData>({
        resolver: yupResolver(cancelOrderSchema)
    })

    const handleFormSubmit = (data: CancelOrderFormData) => {
        onSubmit(data)
        reset()
    }

    return (
        <Modal
            open={showModalCancel}
            close={() => setShowModalCancel(false)}
            isHeader
            title='درخواست لغو سفارش'
        >
            <form onSubmit={handleSubmit(handleFormSubmit)} className='mt-6'>
                <Select
                    placeholder='دلیل لغو سفارش'
                    items={cancelReasons.map((item) => ({
                        label: item.title,
                        value: item._id
                    }))}
                    className='bg-white border'
                    value={watch('reason')}
                    name='reason'
                    onChange={(e) => setValue('reason', e.target.value)}
                    error_text={errors.reason?.message}
                />

                <Input
                    variant='floating_outlined'
                    label='تعداد'
                    className='mt-6'
                    {...register('count')}
                    error_text={errors.count?.message}
                />

                <div className='mt-6'>
                    <div className="text-sm font-medium mb-2">توضیحات :</div>
                    <textarea
                        {...register('description')}
                        className='h-[123px] rounded-xl p-3 text-sm border w-full resize-none focus:outline-none focus:ring-2 focus:ring-primary/20'
                        placeholder='متن توضیحات خود را بنویسید'
                    />
                    {errors.description && (
                        <div className='text-xs text-red-500 mt-1'>
                            {errors.description.message}
                        </div>
                    )}
                </div>

                <div className='flex gap-2 text-xs text-[#7F7F7F] mt-4 p-3 bg-primary/10 rounded-lg'>
                    <div className="size-5 bg-primary/20 rounded-full flex items-center justify-center">
                        <span className="text-primary text-xs">!</span>
                    </div>
                    <span>
                        توجه داشته باشید که بعد از ثبت لغو سفارش طبق
                    </span>
                    <span className='text-primary font-medium'>
                        جدول جرائم
                    </span>
                    <span>
                        جریمه می‌شود
                    </span>
                </div>

                <div className='mt-6'>
                    <Button
                        type="submit"
                        className='w-full'
                        disabled={isLoading}
                        isLoading={isLoading}
                    >
                        لغو سفارش
                    </Button>
                </div>
            </form>
        </Modal>
    )
}

export default CancelOrderModal
