import { type FC } from 'react'
import { Refresh } from 'iconsax-react'
import type { FormikProps } from 'formik'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import Button from '@/components/Button'
import type { CreateCouponType } from '../types/Types'
import { useGenerateCouponCode } from '../hooks/useCouponData'
import { extractErrorMessage } from '@/config/func'
import { toast } from 'react-toastify'

interface CouponBasicInfoProps {
    formik: FormikProps<CreateCouponType>
}

const CouponBasicInfo: FC<CouponBasicInfoProps> = ({
    formik,
}) => {

    const { mutate: generateCouponCode, isPending: isGenerating } = useGenerateCouponCode()

    const handleGenerateCode = () => {
        generateCouponCode(undefined, {
            onSuccess: (data) => {
                formik.setFieldValue('code', data?.data?.code)

            },
            onError: (error) => {
                toast.error(extractErrorMessage(error))
            }
        })
    }

    return (
        <>
            <div className='mb-6'>
                <div className='flex items-end gap-2'>
                    <div className='flex-1'>
                        <Input
                            label='عنوان کد'
                            placeholder=''
                            name='name'
                            value={formik.values.name}
                            onChange={formik.handleChange}
                            error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                        />
                    </div>
                </div>
            </div>

            <div className='mb-6'>
                <Textarea
                    label='توضیحات'
                    placeholder='توضیحات کوپن را وارد کنید'
                    name='description'
                    value={formik.values.description}
                    onChange={formik.handleChange}
                    error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                />
            </div>

            <div className='mb-6'>
                <div className='flex items-end gap-2'>
                    <div className='flex-1'>
                        <Input
                            label='کد تخفیف'
                            placeholder=''
                            name='code'
                            value={formik.values.code}
                            onChange={formik.handleChange}
                            error_text={formik.touched.code && formik.errors.code ? formik.errors.code : ''}
                        />
                    </div>
                    <Button
                        className='w-auto bg-transparent px-4 h-10 text-black border border-primary'
                        onClick={handleGenerateCode}
                        isloading={isGenerating}
                        colorLoading='black'
                    >
                        <Refresh color='black' size={20} className='ml-2' />
                        ساخت کد
                    </Button>
                </div>
            </div>
        </>
    )
}

export default CouponBasicInfo

