import AgricultureFilters from "@/components/filter_tools/AgricultureFilters";
import AgricultureMobileFilters from "@/components/filter_tools/AgricultureMobileFilters";
import BabiesAndKids from "@/components/filter_tools/BabiesAndKids";
import BabiesAndKidsMobileFilters from "@/components/filter_tools/BabiesAndKidsMobileFilters";
import EducationFilters from "@/components/filter_tools/EducationFilters";
import ElectronicsFilterMobile from "@/components/filter_tools/ElectronicsFilterMobile";
import ElectronicsFilters from "@/components/filter_tools/ElectronicsFilters";
import FashionFilters from "@/components/filter_tools/FashionFilters";
import Filters from "@/components/filter_tools/Filters";
import FurnitureFilters from "@/components/filter_tools/FurnitureFilters";
import HealthBeauty from "@/components/filter_tools/HealthBeauty";
import JobsFilters from "@/components/filter_tools/JobsFilters";
import RealEstateFilters from "@/components/filter_tools/RealEstateFilters";
import ServicesFilters from "@/components/filter_tools/ServicesFilters";
import VehicleFilters from "@/components/filter_tools/VehicleFilters";
import LayoutWithNav from "@/components/layout/LayoutWithNav";
import OnpageSearch from "@/components/search/OnpageSearch";
import { Select, Breadcrumb } from "antd";
import {
  agricultureSubFields,
  fetchAdsForCategory,
  fetchDistricts,
  fetchSubFields,
} 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, useState } from "react";
import { Checkbox } from "antd";
// import type { CheckboxChangeEvent } from "antd/es/checkbox";

const { Option } = Select;

const AdsCategory: NextPage = ({ data, propertyFilterFields }: any) => {
  useEffect(() => {
    var ads = document.getElementsByClassName("adsbygoogle").length;
    for (var i = 0; i < ads; i++) {
      try {
        // (adsbygoogle = window.adsbygoogle || []).push({});
        (window.adsbygoogle = window.adsbygoogle || []).push({});
      } catch (e) {}
    }
  }, []);

  const onChange = (value: string) => {
    console.log(`selected ${value}`);
  };

  const onSearch = (value: string) => {
    console.log("search:", value);
  };

  const router = useRouter();
  const { ads_category } = router.query;

  console.log("data", data);
  console.log(
    "property filter fields",
    data.propertyFilterFields.data.filter(
      (item: any) => item.slug === ads_category
    )
  );
  const categoryAds = data.data.data.data;
  const categoryFilterFields = data.propertyFilterFields.data.filter(
    (item: any) => item.slug === ads_category
  )[0];

  const [propertyType, setPropertyType] = useState(1);
  const [spaceType, setSpaceType] = useState("");

  return (
    <LayoutWithNav page_title="Ads">
      <NextSeo
        title={`${ads_category?.toString().replace("-", " ")} | Ashantiweb.com`}
        description={`${ads_category
          ?.toString()
          .replace("-", " ")} on Ashantiweb`}
      />

      {/* mobile version  */}
      <div className="container mx-auto md:hidden">
        <div className="overflow-auto mt-20">
          <div className="h-[150px] md:h-[240px] flex items-center justify-center">
            <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="mb-2 mt-2">
            <Breadcrumb>
              <Breadcrumb.Item>
                <Link href={"/"}>Home</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                <Link href={"/ads"}>All Ads</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                <Link href={`/ads/${ads_category}`} passHref>
                  <a>{ads_category?.toString().replace("-", " ")}</a>
                </Link>
              </Breadcrumb.Item>
              {/* <Breadcrumb.Item>{ads_category?.toString().replace('-', ' ')}</Breadcrumb.Item> */}
            </Breadcrumb>
          </div>
          {/* <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima ipsa sequi enim placeat iure, eum temporibus! Fuga earum sequi, dolorum pariatur ex optio vero alias labore aperiam, dolorem, molestiae incidunt.</p> */}
          {/* electronics */}
          <OnpageSearch
            category={ads_category?.toString().replace("-", " ")}
            unReplacedString={ads_category?.toString()}
          />
          <small>Select a category</small>
          {/* {ads_category === "electronics" && <ElectronicsFilterMobile />}
          {ads_category === "agriculture-pets" && <AgricultureMobileFilters />}
          {ads_category === "babies-kids" && <BabiesAndKidsMobileFilters />} */}
        </div>
      </div>
      {/* end of mobile version */}

      {/* desktop version */}

      {/* ad space */}
      <div className="container hidden mx-auto md:flex items-center mt-16">
        <div className="w-10/12 h-40  ">
          <ins
            className="adsbygoogle"
            // style="display:block"
            style={{ display: "block" }}
            data-ad-client="ca-pub-1110030198957831"
            data-ad-slot="9306370885"
            data-ad-format="auto"
            data-full-width-responsive="true"
          ></ins>
        </div>
      </div>
      <div className="container mx-auto flex">
        <div className="hidden md:block md:w-3/12 lg:w-3/12 mt-10 pr-10">
          <Filters categoryFilterFields={categoryFilterFields} />

          {/* {ads_category === "property" && (
            <RealEstateFilters
              propertyType={propertyType}
              setPropertyType={setPropertyType}
              spaceType={spaceType}
              setSpaceType={setSpaceType}
            />
          )} */}

          {/* show for agric ctgry 
          {ads_category === "agriculture-pets" && <AgricultureFilters />} */}

          {/* babies and kids filter */}
          {/* {ads_category === "babies-kids" && <BabiesAndKids />} */}

          {/* education */}
          {/* {ads_category === "education" && <EducationFilters />} */}

          {/* electronics */}
          {/* {ads_category === "electronics" && <ElectronicsFilters />} */}

          {/* fashion */}
          {/* {ads_category === "fashion" && <FashionFilters />} */}

          {/* furniture */}
          {/* {ads_category === "furniture" && <FurnitureFilters />} */}

          {/* health and beauty */}
          {/* {ads_category === "health-beauty" && <HealthBeauty />} */}

          {/* jobs in ashanti */}
          {/* {ads_category === "jobs-in-ashanti" && <JobsFilters />} */}

          {/* services */}
          {/* {ads_category === "services" && <ServicesFilters />} */}

          {/* vehicles */}
          {/* {ads_category === "vehicles" && <VehicleFilters />} */}

          {/* others */}
          {/* {ads_category === "others" && <VehicleFilters />} */}

          <div className="h-[280px] ml-1 mt-2  flex items-center justify-center text-black">
            <ins
              className="adsbygoogle"
              // style="display:block"
              style={{ display: "block" }}
              data-ad-client="ca-pub-1110030198957831"
              data-ad-slot="9306370885"
              data-ad-format="auto"
              data-full-width-responsive="true"
            ></ins>
          </div>
          <div className="h-[280px] ml-1 mt-2 flex items-center justify-center text-black">
            <ins
              className="adsbygoogle"
              // style="display:block"
              style={{ display: "block" }}
              data-ad-client="ca-pub-1110030198957831"
              data-ad-slot="9306370885"
              data-ad-format="auto"
              data-full-width-responsive="true"
            ></ins>
          </div>
        </div>
        <div className="w-full md:w-7/12 mt-10">
          <div className="flex justify-content-end">
            <div className="">
              Sort by: <span className="text-black">Recommended</span> |{" "}
              <span>Any time</span>
            </div>
          </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-44 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>
                    </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> */}
          <ins
            className="adsbygoogle"
            // style="display:block"
            style={{ display: "block" }}
            data-ad-client="ca-pub-1110030198957831"
            data-ad-slot="9306370885"
            data-ad-format="auto"
            data-full-width-responsive="true"
          ></ins>
        </div>
      </div>
      <div className="container mx-auto md:flex center mt-16">
        <div className="w-11/12 h-40  text-black center">
          <ins
            className="adsbygoogle"
            // style="display:block"
            style={{ display: "block" }}
            data-ad-client="ca-pub-1110030198957831"
            data-ad-slot="9306370885"
            data-ad-format="auto"
            data-full-width-responsive="true"
          ></ins>
        </div>
      </div>
    </LayoutWithNav>
  );
};

export async function getServerSideProps({ req, res, params, query }: any) {
  const { ads_category } = params;

  const { type, duration, facilities, spaceType, product_type, condition } =
    query;

  console.log("type", type);
  console.log("product_type", product_type);
  console.log("condition", condition);
  console.log("category", ads_category);

  const typeForCatergory = type === undefined ? null : type;

  //fetch ads for the category
  const data = await fetchAdsForCategory(ads_category, typeForCatergory);

  //fetch category filter fields
  const propertyFilterFields = await fetchSubFields(ads_category);

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

export default AdsCategory;