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 Category {
    id: string
    title: string
}

interface CategorySelectorProps {
    formik: FormikProps<CreateCouponType>
    categories: Category[]
}

const CategorySelector: FC<CategorySelectorProps> = ({ formik, categories }) => {
    const [search, setSearch] = useState<string>('')

    const filteredCategories = useMemo(() => {
        if (!search) return categories
        return categories.filter((cat) =>
            cat.title.toLowerCase().includes(search.toLowerCase())
        )
    }, [categories, search])

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

    const handleSelectAll = (checked: boolean) => {
        if (checked) {
            formik.setFieldValue('foodCategories', filteredCategories.map((cat) => cat.id))
        } else {
            formik.setFieldValue('foodCategories', [])
        }
    }

    const isAllSelected = useMemo(() => {
        return filteredCategories.length > 0 &&
            filteredCategories.every((cat) => formik.values.foodCategories?.includes(cat.id))
    }, [filteredCategories, formik.values.foodCategories])

    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>
                    {filteredCategories.map((category) => (
                        <div key={category.id} className='flex items-center gap-2'>
                            <Checkbox
                                checked={formik.values.foodCategories?.includes(category.id) || false}
                                onCheckedChange={(checked) =>
                                    handleToggle(category.id, checked as boolean)
                                }
                            />
                            <label className='text-sm cursor-pointer'>{category.title}</label>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export default CategorySelector

