import React, { useEffect } from 'react'
import useState from 'react-usestateref'
import { Radio, Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { useQuery } from 'react-query';
import { propertiesSubFields } from 'apiCalls/apiEndpoints';
import type { RadioChangeEvent } from 'antd';
import { useRouter } from 'next/router';
import { SyncLoader } from 'react-spinners';
import { isEmptyChildren } from 'formik';

function RealEstateFilters({ propertyType, setPropertyType, spaceType, setSpaceType }: any) {
    const router = useRouter();
    const { type } = router.query;

    const onChange = (e: CheckboxChangeEvent) => {
        console.log(`checked = ${e.target.checked}`);
    };

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

    const regObj: any = {};

    const { data, isSuccess, isLoading } = useQuery(['properties-filter-fields'], propertiesSubFields);

    console.log(data?.data.data.subclassifieds)

    //if not empty
    function isEmpty(obj: any) {
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop))
                return false;
        }
        return true;
    }

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


    //on change property type
    const onChangePropertyType = (e: RadioChangeEvent) => {
        setPropertyType(e.target.value);

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

    const onChangeSpaceType = (e: any) => {
        setSpaceType(e.target.name)

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

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

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

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

    useEffect(() => {
        if (isSuccess) {
            const json = JSON.parse(data?.data?.data?.subclassifieds?.find((sub: any) => sub.slug === type)?.sort_options ?? '[]');
            console.log('find type', json)
            setsortOptionsLocal(json[2]?.custom_sort ?? [])
        }
    }, [data?.data.data.subclassifieds, isSuccess, type])


    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={onChangePropertyType}>
                        {data?.data.data.subclassifieds.map((sbc: any) => (
                            // <li className='font-normal text-gray-400' ></li>
                            <Radio key={sbc.id} value={sbc.slug}>{sbc.name}</Radio>
                            // <Checkbox onChange={onChange}>Checkbox</Checkbox>
                        ))}
                    </Radio.Group>
                </ul>
            </div>

            {/* type sort options */}

            {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={onChangeSpaceType}>
                            {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={onChangeDuration}>
                            {sortOptionsLocal[1]?.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[2]?.label}</p>
                    <ul className=''>
                        <Radio.Group name={sortOptionsLocal[2]?.label} onChange={onChangeFacilities}>
                            {sortOptionsLocal[2]?.options.map((sbc: any) => (
                                <>
                                    <Radio key={sbc.value} value={sbc.value} >{sbc.label}</Radio>
                                    <br />
                                </>
                            ))}
                        </Radio.Group>
                    </ul>
                </div>
            )}

            

            {/* {data?.data.data.subclassifieds.find((sub : any) => sub.slug === type)} */}
            {/* {
                sortOptionsLocal.length > 0 && sortOptionsLocal.map((sortOpt: any, i: number) => (
                    <div key={i} className='bg-white rounded-md shadow-md p-3'>
                        <p className='font-normal text-gray-600'>{sortOpt.label}</p>
                        <ul className=''>
                            <Radio.Group name={sortOpt.label} onChange={onChangeSpaceType}>
                                {sortOpt.options.map((sbc: any) => (
                                    <>
                                        <Radio key={sbc.value} value={sbc.value} >{sbc.label}</Radio>
                                        <br />
                                    </>
                                ))}
                            </Radio.Group>
                        </ul>
                    </div>
                ))
            } */}


            {/* <div className='bg-white rounded-md shadow-md p-3'>
                <p className='font-semibold text-gray-500'>Property Type</p>
                <ul className='h-40 overflow-auto mt-2'>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>

                </ul>
            </div>

            <div className='bg-white rounded-md shadow-md p-3'>
                <p className='font-semibold text-gray-500'>Condition</p>
                <ul className='h-40 overflow-auto mt-2'>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>
                    <li>
                        <Checkbox onChange={onChange}>Checkbox</Checkbox>
                    </li>

                </ul>
            </div>
            <div className='bg-white rounded-md shadow-md p-3'>
                <p className='font-semibold text-gray-500'>Furnishing</p>
                <ul className='h-40 overflow-auto mt-2'>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                </ul>
            </div>
            <div className='bg-white rounded-md shadow-md p-3'>
                <p className='font-semibold text-gray-500'>Facilities</p>
                <ul className='h-40 overflow-auto mt-2'>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                </ul>
            </div>
            <div className='bg-white rounded-md shadow-md p-3'>
                <p className='font-semibold text-gray-500'>Price</p>
                <ul className='h-40 overflow-auto mt-2'>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>1</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                    <li>
                        <Radio>Show all</Radio>
                    </li>
                </ul>
            </div> */}
        </div >
    )
}

export default RealEstateFilters