import { Select } from 'antd';
import { agricultureSubFields, } 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 AgricultureMobileFilters() {

    const router = useRouter();

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

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

    //get the categories
    const { data, isSuccess, isLoading } = useQuery(['agriculture-mobile-fields'], agricultureSubFields, {
        refetchOnWindowFocus: false
    });


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

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

    const [sortOptionsLocal, setsortOptionsLocal] = useState<any>([]);

    const [isCategorySelected, setIsCategorySelected] = useState(false);

    //when a category is selected
    const onChange = (value: string) => {
        setIsCategorySelected(true);

        setqueryObj((prev: any) => {
            return { ...prev, 'type': value }
        })

        // data?.data.data.subclassifieds.find((item : any) => item.slug === sbc.slug)
        const json = JSON.parse(data?.data.data.subclassifieds.find((item: any) => item.slug === value)?.sort_options ?? '[]');
        setsortOptionsLocal(json[2]?.custom_sort ?? []);
    };

    //when a search query is made
    const onSearch = (value: string) => {
        console.log('search:', value);
    };
    
    const onChangeProductType = (e: any) => {
        console.log(e)
        // setSpaceType(e.target.name)
        setqueryObj((prev: any) => {
            return { ...prev, 'product_type': e.target.value }
        })
    }

    return (
        <>
            {!isLoading ? (<>
                <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>
            </>) :
                <div className='overflow-hidden center'>
                    <SyncLoader color='green' size={5} />
                </div>
            }

            {isCategorySelected && (
                <Select
                    showSearch
                    placeholder={isLoading ? 'loading, please wait' : "Select a sub category"}
                    optionFilterProp="children"
                    className='w-full mt-2'
                    onChange={onChangeProductType}
                    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>
                    ))} */}
                    {sortOptionsLocal[0]?.options.map((sbc: any) => (
                        <>
                            <Option key={sbc.id} value={sbc.slug}>{sbc.name}</Option>
                        </>
                    ))}
                </Select>
            )}

        </>
    )
}

export default AgricultureMobileFilters