import { type FC, useState, useMemo } from 'react'
import type { FormikProps } from 'formik'
import Input from '@/components/Input'
import { Checkbox } from '@/components/ui/checkbox'
import type { CreateCouponType } from '../types/Types'

interface Food {
    id: string
    title: string
}

interface FoodSelectorProps {
    formik: FormikProps<CreateCouponType>
    foods: Food[]
}

const FoodSelector: FC<FoodSelectorProps> = ({ formik, foods }) => {
    const [search, setSearch] = useState<string>('')

    const filteredFoods = useMemo(() => {
        if (!search) return foods
        return foods.filter((food) =>
            food.title.toLowerCase().includes(search.toLowerCase())
        )
    }, [foods, search])

    const handleToggle = (foodId: string, checked: boolean) => {
        const currentIds = formik.values.foods || []
        if (checked) {
            formik.setFieldValue('foods', [...currentIds, foodId])
        } else {
            formik.setFieldValue('foods', currentIds.filter((id) => id !== foodId))
        }
    }

    const handleSelectAll = (checked: boolean) => {
        if (checked) {
            formik.setFieldValue('foods', filteredFoods.map((food) => food.id))
        } else {
            formik.setFieldValue('foods', [])
        }
    }

    const isAllSelected = useMemo(() => {
        return filteredFoods.length > 0 &&
            filteredFoods.every((food) => formik.values.foods?.includes(food.id))
    }, [filteredFoods, formik.values.foods])

    return (
        <div>
            <div className='text-sm mb-3'>کالاهایی که شامل تخفیف میشوند</div>
            <div className='mb-6 border border-border rounded-xl p-4'>
                <Input
                    variant='search'
                    className='bg-[#EEF0F7]'
                    placeholder='جستجو'
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                />
                <div className='mt-3 space-y-2 max-h-60 overflow-y-auto'>
                    <div className='flex items-center gap-2'>
                        <Checkbox
                            checked={isAllSelected}
                            onCheckedChange={handleSelectAll}
                        />
                        <label className='text-sm cursor-pointer'>همه</label>
                    </div>
                    {filteredFoods.map((food) => (
                        <div key={food.id} className='flex items-center gap-2'>
                            <Checkbox
                                checked={formik.values.foods?.includes(food.id) || false}
                                onCheckedChange={(checked) =>
                                    handleToggle(food.id, checked as boolean)
                                }
                            />
                            <label className='text-sm cursor-pointer'>{food.title}</label>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export default FoodSelector

