import { Radio } from 'antd';
import { agricultureSubFields } from 'apiCalls/apiEndpoints';
import Router, { 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';

function AgricultureFilters() {
    //router
    const router = useRouter();
    const {type} = router.query;

    const {data: catSubFields} = useQuery(['subfields']);

    const { data, isSuccess, isLoading } = useQuery(['properties-filter-fields'], agricultureSubFields, {
        refetchOnWindowFocus: false
    });

 


    console.log('type', type)

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

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


    //handle the agric type change
    const onChangeAgricPetsType = (e: any) => {
        setqueryObj((prev: any) => {
            return { ...prev, 'type': e.target.value }
        })
    }

    const [isShowAll, setIsShowAll] = useState(false)

    const [currentFilterTtemId, setcurrentFilterTtemId] = useState()

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

    const applyClickedFilter = (e: any, sbc: any,) => {
        console.log(sbc)
        setcurrentFilterTtemId(sbc.id)
        setIsShowAll(false)
        setqueryObj((prev:any) => {
            return {
                ...prev, 'type': sbc.slug
            }
        })

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

    const showAllHandler = () => {
        setIsShowAll(!isShowAll)
        router.push('agriculture-pets')
    }

    const onChangeProductType = (e: any) => {
        console.log(e)
        // setSpaceType(e.target.name)
        setqueryObj((prev: any) => {
            return { ...prev, 'product_type': e.target.value }
        })
    }
     
    const onConditionBrandNew = (e: any) => {

    }

    const onChangeConditionType = (e: any) => {
        setqueryObj((prev: any) => {
            return { ...prev, 'condition': e.target.value }
        })
    }

    return (
        <div className='space-y-4'>
            {/* location */}
            <div className='bg-white rounded-md shadow-md p-3'>
                <p className='font-normal text-gray-600'>Filters</p>
                <ul className='mt-2'>
                    {isLoading && <SyncLoader color='green' size={5} />}
                    <li className={`cursor-pointer text-gray-500 ${isShowAll ? 'font-bold': ''}`}onClick={() => showAllHandler()}>Show all</li>
                    {data?.data.data.subclassifieds.map((sbc: any) => (
                        <>
                            {/* <Radio key={sbc.id} value={sbc.slug}>{sbc.name}</Radio> */}
                            <li onClick={(e:any) => applyClickedFilter(e, sbc)} key={sbc.id} className={`cursor-pointer text-gray-500 ${currentFilterTtemId == sbc.id && !isShowAll ? 'font-bold' : ''}`} value={sbc.slug}>{sbc.name}</li>
                        </>
                    ))}
                </ul>
            </div>

            {sortOptionsLocal.length > 0 && (
                <div className='bg-white rounded-md shadow-md p-3'>
                    <p className='font-normal text-gray-600'>{sortOptionsLocal[0]?.label}</p>
                    <ul className=''>
                        <Radio.Group name={sortOptionsLocal[0]?.label} onChange={onChangeProductType}>
                            {sortOptionsLocal[0]?.options.map((sbc: any) => (
                                <>
                                    <Radio key={sbc.value} value={sbc.value} >{sbc.label}</Radio>
                                    <br />
                                </>
                            ))}
                        </Radio.Group>
                    </ul>
                </div>
            )}

            {sortOptionsLocal.length > 0 && (
                <div className='bg-white rounded-md shadow-md p-3'>
                    <p className='font-normal text-gray-600'>{sortOptionsLocal[1]?.label}</p>
                    <ul className=''>
                        <Radio.Group name={sortOptionsLocal[1]?.label} onChange={onChangeConditionType}>
                            {sortOptionsLocal[1]?.options.map((sbc: any) => (
                                <>
                                    <Radio key={sbc.value} value={sbc.value} >{sbc.label}</Radio>
                                    <br />
                                </>
                            ))}
                        </Radio.Group>
                    </ul>
                </div>
            )}

        </div>
    )
}

export default AgricultureFilters