import { type FC } from 'react'
import type { FormikProps } from 'formik'
import Input from '@/components/Input'
import RadioGroup from '@/components/RadioGroup'
import type { CreateCouponType } from '../types/Types'

interface CouponDiscountSettingsProps {
    formik: FormikProps<CreateCouponType>
    couponType: 'PERCENTAGE' | 'FIXED'
    onCouponTypeChange: (value: 'PERCENTAGE' | 'FIXED') => void
}

const CouponDiscountSettings: FC<CouponDiscountSettingsProps> = ({
    formik,
    couponType,
    onCouponTypeChange,
}) => {
    return (
        <>
            <div className='mb-6'>
                <div className='text-sm mb-3'>مبلغ تخفیف</div>
                <RadioGroup
                    items={[
                        { label: 'مبلغ ثابت', value: 'FIXED' },
                        { label: 'درصد', value: 'PERCENTAGE' },
                    ]}
                    selected={couponType}
                    onChange={(value) => {
                        onCouponTypeChange(value as 'PERCENTAGE' | 'FIXED')
                        formik.setFieldValue('type', value as 'PERCENTAGE' | 'FIXED')
                    }}
                />
            </div>

            <div className='mb-6'>
                <Input
                    label={couponType === 'PERCENTAGE' ? 'درصد تخفیف' : 'مبلغ تخفیف'}
                    placeholder={couponType === 'PERCENTAGE' ? '%' : 'تومان'}
                    name='value'
                    type='number'
                    value={formik.values.value}
                    onChange={(e) => formik.setFieldValue('value', Number(e.target.value))}
                    error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
                />
            </div>

            {couponType === 'PERCENTAGE' && (
                <div className='mb-6'>
                    <Input
                        label='حداکثر تخفیف'
                        placeholder='تومان'
                        name='maxDiscount'
                        type='number'
                        seprator={true}
                        value={formik.values.maxDiscount || ''}
                        onChange={(e) => {
                            const value = e.target.value ? Number(e.target.value) : null
                            formik.setFieldValue('maxDiscount', value)
                        }}
                        error_text={formik.touched.maxDiscount && formik.errors.maxDiscount ? formik.errors.maxDiscount : ''}
                    />
                </div>
            )}

            <div className='mb-6'>
                <Input
                    label='حداقل مبلغ سفارش'
                    placeholder='تومان'
                    name='minOrderAmount'
                    type='number'
                    seprator={true}
                    value={formik.values.minOrderAmount}
                    onChange={(e) => formik.setFieldValue('minOrderAmount', Number(e.target.value))}
                    error_text={formik.touched.minOrderAmount && formik.errors.minOrderAmount ? formik.errors.minOrderAmount : ''}
                />
            </div>
        </>
    )
}

export default CouponDiscountSettings