import LayoutWithNav from "@/components/layout/LayoutWithNav";
import type { NextPage } from "next";
import classifiedHeader from "assets/images/page-header.png";
import classifiedsHeadIcon from "assets/images/directory-head-icon.png";
import { directories, fetchDistricts } from "apiCalls/apiEndpoints";
import { useDistricts } from "context/DistrictContext";
import { useEffect, useState } from "react";
import { NextSeo } from "next-seo";
import SectionHeader from "@/components/classifieds_section/SectionHeader";
import useInitGAd from "@/components/hooks/useInitGAd";
import DirectoryItem from "@/components/directory/DirectoryItem";
import useFilterDirectory from "@/components/hooks/useFilterDirectory";

const Directory: NextPage = ({ directoriesData, districts }: any) => {
  const { setDistricts, setCurrentDistrict } = useDistricts();

  /**
   * 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, dd } =
    useFilterDirectory(directoriesData);

  console.log("directories from hook", dd);
  console.log("query", Query);

  // google ads initializer
  useInitGAd();

  setDistricts(districts);

  useEffect(() => {
    setCurrentDistrict(null);
  }, [setCurrentDistrict]);

  return (
    <LayoutWithNav page_title="directory" description="Description">
      <NextSeo
        title={`Directory | Ashantiweb.com`}
        description={`Directory of businesses in the Ashanti Region`}
      />
      <SectionHeader
        classifiedsImage={classifiedHeader}
        sectionTitle="Ashanti Bussiness Directory"
        classifiedsHeadIcon={classifiedsHeadIcon}
      />
      <main className="container mx-auto lg:px-40">
        {/* <div className="bg-blue-500 center mt-20 h-24"></div> */}

        {/* google ad */}

        {/* <div className="mt-20 h-24">
          <GAdsense
            width="100%"
            isResponsive={true}
            adSlot="1627205927"
            adFormat="auto"
          />

          <div className="sm:hidden">
            <ins
              className="adsbygoogle"
              style={{
                display: "inline-block",
                width: "300px",
                height: "300px;",
              }}
               style="display:inline-block;width:300px;height:300px"
              data-ad-client="ca-pub-1110030198957831"
              data-ad-slot="1627205927"
            ></ins>
          </div>

          <div className="hidden sm:block">
            <ins
              className="adsbygoogle"
              style={{
                display: "inline-block",
                width: "700px",
                height: "250px;",
              }}
              data-ad-client="ca-pub-1110030198957831"
              data-ad-slot="8247719512"
            ></ins>
          </div>
        </div> */}
        {/* ./end google ad */}
        <div className=" w-full lg:w-8/12 mt-2">
          {/* <ins
            className="adsbygoogle"
            // style="display:block"
            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 className="flex items-center max-w-md">
              <input
                type="text"
                placeholder="Search all directories"
                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>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-4 mt-4">
              {directories?.length <= 0 ? (
                <div className="center">No data found</div>
              ) : (
                directories?.map((dir: any, i: number) => (
                  <DirectoryItem
                    key={i}
                    urlPath={"/directory/" + dir.slug}
                    name={dir.name}
                  />
                ))
              )}
            </div>
          </div>
          <div className="w-full lg:w-3/12">
            {/* <ins
              className="adsbygoogle"
              // style="display:block"
              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>
      </main>
    </LayoutWithNav>
  );
};

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

  const directoriesRes = await directories();
  const districts = await fetchDistricts();

  return {
    props: {
      directoriesData: directoriesRes.data,
      districts: districts.data,
    },
  };
}

export default Directory;