import { Radio } from 'antd';
import { 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';

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

    //router
    const router = useRouter();

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

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

    //handle the agric type change
    const onChangeBabyType = (e: any) => {
        setqueryObj((prev: any) => {
            return {...prev, 'type': 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'>Filter Properties</p>
                <ul className=''>
                    {isLoading && <SyncLoader color='green' size={5} />}
                    <Radio.Group onChange={onChangeBabyType}>
                        {data?.data.data.subclassifieds.map((sbc: any) => (
                            <>
                                <Radio key={sbc.id} value={sbc.slug}>{sbc.name}</Radio>
                                <br />
                            </>
                        ))}
                    </Radio.Group>
                </ul>
            </div>
        </div>
    )
}

export default BabiesAndKids