import { type FC } from 'react'
import moment from 'moment-jalaali'
import type { FormikProps } from 'formik'
import Input from '@/components/Input'
import DatePickerComponent from '@/components/DatePicker'
import type { CreateCouponType } from '../types/Types'

interface CouponUsageSettingsProps {
    formik: FormikProps<CreateCouponType>
}

const CouponUsageSettings: FC<CouponUsageSettingsProps> = ({ formik }) => {
    const convertToPersian = (gregorianDate: string | null): string | undefined => {
        if (!gregorianDate) return undefined
        try {
            const persianDate = moment(gregorianDate).format('jYYYY-jMM-jDD')
            return persianDate
        } catch (error) {
            console.error('Error converting date:', error)
            return undefined
        }
    }

    return (
        <>
            <div className='grid grid-cols-2 gap-4 mb-6'>
                <Input
                    label='حداکثر استفاده'
                    placeholder=''
                    name='maxUses'
                    type='number'
                    value={formik.values.maxUses}
                    onChange={(e) => formik.setFieldValue('maxUses', Number(e.target.value))}
                    error_text={formik.touched.maxUses && formik.errors.maxUses ? formik.errors.maxUses : ''}
                />
                <Input
                    label='حداکثر استفاده برای هر کاربر'
                    placeholder=''
                    name='maxUsesPerUser'
                    type='number'
                    value={formik.values.maxUsesPerUser || ''}
                    onChange={(e) => {
                        const value = e.target.value ? Number(e.target.value) : null
                        formik.setFieldValue('maxUsesPerUser', value)
                    }}
                    error_text={formik.touched.maxUsesPerUser && formik.errors.maxUsesPerUser ? formik.errors.maxUsesPerUser : ''}
                />
            </div>

            <div className='grid grid-cols-2 gap-4 mb-6'>
                <DatePickerComponent
                    label='تاریخ شروع'
                    placeholder='تاریخ شروع را انتخاب کنید'
                    defaulValue={convertToPersian(formik.values.startDate)}
                    onChange={(date) => {
                        formik.setFieldValue('startDate', date || null)
                    }}
                />
                <DatePickerComponent
                    label='تاریخ پایان'
                    placeholder='تاریخ پایان را انتخاب کنید'
                    defaulValue={convertToPersian(formik.values.endDate)}
                    onChange={(date) => {
                        formik.setFieldValue('endDate', date || null)
                    }}
                />
            </div>

            <div className='mb-6'>
                <Input
                    label='شماره تلفن کاربر (اختیاری)'
                    placeholder='09123456789'
                    name='userPhone'
                    type='tel'
                    value={formik.values.userPhone || ''}
                    onChange={(e) => {
                        const value = e.target.value.trim()
                        formik.setFieldValue('userPhone', value || undefined)
                    }}
                    error_text={formik.touched.userPhone && formik.errors.userPhone ? formik.errors.userPhone : ''}
                />
            </div>
        </>
    )
}

export default CouponUsageSettings

