"use client"

import { FC } from 'react'
import { Setting5 } from 'iconsax-react'
import { Button } from '@/components/ui/button'
import Modal from '@/components/Modal'
import BrandFilterSection from './BrandFilterSection'
import { useBrandFiltersData } from '../hooks/useBrandFiltersData'

interface BrandFiltersProps {
    isMobile?: boolean
    isOpen?: boolean
    onClose?: () => void
    brandId: string
}

const BrandFilters: FC<BrandFiltersProps> = ({
    isMobile = false,
    isOpen = false,
    onClose,
    brandId
}) => {
    const {
        filterState,
        categories,
        isLoading,
        priceMinMaxRange,
        applyCategoryFilter,
        updatePriceRange,
        clearAllFilters,
    } = useBrandFiltersData({ brandId })

    const handleClearFilters = () => {
        clearAllFilters()

        // Close mobile modal after clearing filters
        if (isMobile && onClose) {
            onClose()
        }
    }

    const FilterContent = () => (
        <>
            <div className='flex items-center gap-2.5'>
                <Setting5 size={24} color='#666666' />
                <div className='text-[#666666]'>فیلترها</div>
            </div>

            <BrandFilterSection
                categories={categories}
                filterState={filterState}
                onCategoryChange={applyCategoryFilter}
                onPriceChange={updatePriceRange}
                brandId={brandId}
                priceMinMaxRange={priceMinMaxRange}
            />

            <div className='mt-4'>
                <Button
                    variant='outline'
                    onClick={handleClearFilters}
                    className='w-full'
                    disabled={isLoading}
                >
                    حذف همه فیلترها
                </Button>
            </div>
        </>
    )

    if (isMobile) {
        return (
            <Modal
                open={isOpen}
                close={onClose || (() => { })}
                title="فیلترها"
                isHeader={true}
            >
                <div className='max-h-[70vh] overflow-y-auto'>
                    <FilterContent />
                </div>
            </Modal>
        )
    }

    return (
        <div className='w-[270px] hidden lg:block border border-border rounded-[10px] p-5 h-fit'>
            <FilterContent />
        </div>
    )
}

export default BrandFilters
