import RealEstateFilters from '@/components/filter_tools/RealEstateFilters'
import LayoutWithNav from '@/components/layout/LayoutWithNav'
import { fetchAdsByDistrictCategory, fetchAdsForCategory } from 'apiCalls/apiEndpoints'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React from 'react'

function Category({categoryAds} : any) {
    const router = useRouter()
    const { district, category } = router.query
    console.log(district, category)
    console.log('router', router)
    return (
        <LayoutWithNav>
            <section className='container mx-auto flex'>
                <div className='hidden md:block w-3/12 mt-10 pr-10'>
                    <button className='btn btn-sm btn-success w-100'>
                        <i className="pr-1 far fa-map-marker"></i>
                        All of Ashanti
                    </button>
                    {category === 'property' && (
                        <RealEstateFilters />
                    )}
                    <div className='h-[280px] ml-1 bg-gray-500 flex items-center justify-center text-black'>
                        ad space
                    </div>
                </div>
                <div className='w-full md:w-7/12 mt-10'>
                    <div className='h-[150px] md:h-[240px] bg-gray-500 flex items-center justify-center text-black'>
                        ad space
                    </div>
                    {categoryAds.length > 0 ? (
                        <div className='grid grid-cols-2 lg:grid-cols-3 gap-4 mt-3'>
                            {categoryAds.map((ads: any, i: number) => (
                                <Link href={"/ad/" + ads.slug} key={i} className='cursor-pointer' passHref>
                                    <a>
                                        <div key={i} className='cursor-pointer border shadow-md rounded-md' >
                                            <div className='h-40 md:h-44 lg:h-52 w-full relative'>
                                                <Image layout='fill' src={ads?.picture} alt={ads?.name} placeholder='blur' blurDataURL='/assets/images/preloader/preloader-static6.png' />
                                            </div>
                                            <div className='p-2'>
                                                <p className='font-normal text-gray-700 h-12 mb-2'>{ads?.name?.slice(0, 30)}</p>
                                                <p className='font-bold text-green-500 mt-2'>{ads?.currency} {ads?.price}</p>
                                            </div>
                                        </div>
                                    </a>
                                </Link>
                            ))}
                        </div>
                    ) : (
                        <div className='flex container justify-center mt-3'>
                            <p>No Data found</p>
                        </div>
                    )}

                </div>
                <div className="hidden md:block md:w-2/12 mt-10">
                    <div className='h-[600px] ml-2 bg-gray-500 flex items-center justify-center text-black'>
                        ad space
                    </div>
                </div>
            </section>
        </LayoutWithNav>
    )
}

export async function getServerSideProps({ req, res, params }: any) {
    res.setHeader(
        'Cache-Control',
        'public, s-maxage=60, stale-while-revalidate=59'
    )

    console.log(req)

    const { district, category } = params;

    // console.log('district', district, 'category', category)

    //district and category
    const data = await fetchAdsByDistrictCategory(district, category);

    console.log('data',data.data)


    return {
        props: {
            categoryAds: data.data.data
        }, // will be passed to the page component as props
    }
}

export default Category