import { Select } from 'antd';
import { agricultureSubFields, babiesAndKids, } from 'apiCalls/apiEndpoints';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react'
import { useQuery } from 'react-query';
import { SyncLoader } from 'react-spinners';
import { isEmpty } from 'utilFuncs/utilFunctions';

const { Option } = Select;


function BabiesAndKidsMobileFilters() {

    const router = useRouter();

    const [queryObj, setqueryObj] = useState<any>({})

    useEffect(() => {
        if (!isEmpty(queryObj)) {
            router.push({
                pathname: 'babies-kids',
                query: queryObj
            })
        }
    }, [queryObj]);

    //baby type
    const { data, isSuccess, isLoading } = useQuery(['baby-type'], babiesAndKids, {
        refetchOnWindowFocus: false
    });

    //set the agriculture category
    const [agriculture, setAgricultureSubs] = useState<any>([])

    useEffect(() => {
        if (isSuccess) {
            setAgricultureSubs(data?.data.data.subclassifieds)
        }
    }, [data?.data.data.subclassifieds, isSuccess])



    //when a category is selected
    const onChange = (value: string) => {
        setqueryObj((prev: any) => {
            return { ...prev, 'type': value }
        })
    };

    //when a search query is made
    const onSearch = (value: string) => {
        console.log('search:', value);
    };

    return (
        <>
            {isLoading ? <div className='overflow-hidden center'>
                <SyncLoader color='green' size={5} />
            </div> : <Select
                showSearch
                placeholder={isLoading ? 'loading, please wait' : "Select a category"}
                optionFilterProp="children"
                className='w-full'
                onChange={onChange}
                onSearch={onSearch}
                disabled={isLoading}
                filterOption={(input, option) =>
                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                }
            >
                {agriculture.map((sbc: any) => (
                    <Option key={sbc.id} value={sbc.slug}>{sbc.name}</Option>
                ))}
            </Select>}

        </>
    )
}



export default BabiesAndKidsMobileFilters