import LayoutWithNav from "@/components/layout/LayoutWithNav";
import StandardContainer from "@/components/layout/StandardContainer";
import { fetchDistricts, fetchSingleDirectory } from "apiCalls/apiEndpoints";
import { useDistricts } from "context/DistrictContext";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect } from "react";
import { Breadcrumb } from "antd";
import { formatSentenceFlex } from "utilFuncs/utilFunctions";
import useFilterDirectory from "@/components/hooks/useFilterDirectory";
import DirectoryItem from "@/components/directory/DirectoryItem";

function DirectoryCategory({ directory, districts }: any) {
  const router = useRouter();
  const { directory_category, directory_subdirectory } = router.query;
  

  /**
   * custom hook for filtering directories, pass in the directories
   * data, get back the search handler, the query and the query setter
   * with the filtered directory results
   */
  const {handleDirectorySearch, Query, setQuery, directories} = useFilterDirectory(directory.subdirectories)

  

  return (
    <LayoutWithNav page_title={"Directory | " + directory_category}>
      <StandardContainer>
        <div className="w-full mt-2">
          {process.env.NODE_ENV == "production" && (<ins
            className="adsbygoogle"
            style={{ display: "block" }}
            data-ad-client="ca-pub-1110030198957831"
            data-ad-slot="8967343274"
            data-ad-format="auto"
            data-full-width-responsive="true"
          ></ins>)}
        </div>
        <div className="flex-col md:flex lg:flex-row justify-between mt-4">
          <div className="w-full lg:w-8/12">
            <div>
              <Breadcrumb>
                <Breadcrumb.Item>
                  <Link href="/directory">Directory</Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                <Link href={`/directory/${directory_category}`}>{formatSentenceFlex(directory_category as string, "-")}</Link>
                </Breadcrumb.Item>
              </Breadcrumb>
            </div>

            <h2 className="my-4">{directory.name}</h2>

            <div className="flex items-center max-w-md">
              <input
                type="text"
                placeholder={"Search in " + directory.name + " directory" }
                className="border-2 w-full p-2"
                onChange={(e) => {
                  setQuery(e.target.value);
                }}
                value={Query}
              />
              <button onClick={handleDirectorySearch} className="bg-green-500 p-2 text-white">search</button>
            </div>  

            {directories.length > 0 ? ( <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-4 mt-4">
              {directories.map((dir: any, i: number) => (
                <DirectoryItem key={i} name={dir?.name} urlPath={`/directory/${directory_category}/${dir?.slug}`}/>
              ))}
            </div>) : (
              <div>
                <h4>No data found</h4>
              </div>
            )}
           
          </div>
          <div className="w-full lg:w-3/12">
            {/* <div className='hidden md:block bg-gray-500 center mt-4 ml-4 w-full h-[300px]'>
                Ad space
            </div> */}
{/* 
            <ins
              className="adsbygoogle"
              style={{ display: "block" }}
              data-ad-client="ca-pub-1110030198957831"
              data-ad-slot="8967343274"
              data-ad-format="auto"
              data-full-width-responsive="true"
            ></ins> */}
          </div>
        </div>
      </StandardContainer>
    </LayoutWithNav>
  );
}

export default DirectoryCategory;

export async function getServerSideProps({ req, res, params }: any) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=10, stale-while-revalidate=59"
  );
  const directory = await fetchSingleDirectory(params.directory_category);
  const districts = await fetchDistricts();
  
  return {
    props: {
      directory: directory.data,
      districts: districts.data,
    },
  };
}