import CategoryFilter from '@/components/filter_tools/CategoryFilter'
import LayoutWithNav from '@/components/layout/LayoutWithNav'
import { classifiedCategories, classifiedCategoriesWithSubcategories, fetchAdsByDistrict, fetchAdsForCategory, fetchDistricts, fetchHomepageAds } from 'apiCalls/apiEndpoints'
import { useDistricts } from 'context/DistrictContext'
import type { NextPage } from 'next'
import { NextSeo } from 'next-seo'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import styles from '../../styles/Home.module.css'

const District: NextPage = ({ data, clwsc }: any) => {
  const router = useRouter()
  const { district }: any = router.query
  const { setCurrentDistrict, setDistricts } = useDistricts()

  const categoryAds: Array<any> = data.data.data.data;

  useEffect(() => {
    setCurrentDistrict(district?.split('-').map((di: any) => di[0].toUpperCase() + di.substring(1)).join('-').replace(/-/g, ' '))
  }, [district, setCurrentDistrict])


  setDistricts(data?.districts);


  return (
    <LayoutWithNav page_title='district test' description='district'>
      <NextSeo
        title={`${district.replace(/-/g, ' ')} | Ashantiweb.com`}
        description={`${district.replace(/-/g, ' ')}`}
      />
      <div 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>
          <CategoryFilter clwsc={clwsc} link={district} />
          <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) => (
                //  + ads?.model?.slug
                <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'>item name</p>
                                                <p className='font-bold text-green-500 mt-2'>item price</p> */}
                        <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>
                      {/* <p>{ads?.model?.name}</p>
                                     <p>price of item</p> */}
                    </div>
                  </a>
                </Link>
              ))}
            </div>
          ) : (
            <div className='flex container justify-center mt-3'>
              <p>No Data found for {district.replace(/-/g, ' ')}</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>
      </div>
    </LayoutWithNav>
  )
}

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

  const districts = await fetchDistricts()
  const classifiedCategoriesdata = await classifiedCategories()
  const homePageAds = await fetchHomepageAds()

  const { district } = params;
  const data = await fetchAdsByDistrict(district)

  const classifiedsWithSubCategories = await classifiedCategoriesWithSubcategories()

  console.log(data.data)

  return {
    props: {
      data: {
        data: data.data,
        districts: districts.data,
        classifieds: classifiedCategoriesdata.data,
        homePageAds: homePageAds.data,
      },
      clwsc: classifiedsWithSubCategories.data.data
    }, // will be passed to the page component as props
  }
}


export default District