import Filters from "@/components/filter_tools/Filters";
import LayoutWithNav from "@/components/layout/LayoutWithNav";
import OnpageSearch from "@/components/search/OnpageSearch";
import { Select, Breadcrumb } from "antd";
import {
  classifiedCategories,
  fetchAdsInCategoryGeneral,
  fetchSubFields,
} from "apiCalls/apiEndpoints";
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 SortingBy from "@/components/filter_tools/SortingBy";
import useInitGAd from "@/components/hooks/useInitGAd";
import SortByTime from "@/components/filter_tools/SortByTime";
import { sortByNewest } from "utilFuncs/utilFunctions";
// import type { CheckboxChangeEvent } from "antd/es/checkbox";

const { Option } = Select;

const AdsCategory: NextPage = ({ data, propertyFilterFields, ads }: any) => {
  //init google ads
  useInitGAd();

  // const {data} = useQuery(["ads-on-client", fetchAdsForCategory]);
  const onChange = (value: string) => {};

  const onSearch = (value: string) => {};

  const router = useRouter();

  const { ads_category } = router.query;

  const [catergoryAdsState, setcatergoryAdsState] = useState(ads.data);

  useEffect(() => {
    setcatergoryAdsState(ads.data);
  }, [router.asPath]);

  const categoryFilterFields = propertyFilterFields.data.filter(
    (item: any) => item.slug === ads_category
  )[0];

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

  const [sortByState, setsortByState] = useState("Recommended");
  const [price, setPrice] = useState(0);

  const [minPrice, setminPrice] = useState(0);
  const [maxPrice, setmaxPrice] = useState(0);

  useEffect(() => {
    sortAdsBy();
  }, [sortByState]);

  const sortAdsBy = () => {
    setSortByTime("All Time");
    switch (sortByState) {
      case "Highest Price":
        setsortedData([...ads.data].sort(sortHighestFunc));
        setcatergoryAdsState([...ads.data].sort(sortHighestFunc));
        break;
      case "Lowest Price":
        setsortedData([...ads.data].sort(sortLowestFunc));
        setcatergoryAdsState([...ads.data].sort(sortLowestFunc));
        break;
      case "Recommended":
      case "Latest Ads":
        setsortedData(ads.data);
        setcatergoryAdsState(ads.data);
        break;
      case "Newest":
        setsortedData([...ads.data].sort(sortByNewest));
        setcatergoryAdsState(ads.data);
      default:
        setsortedData([...ads.data].sort(sortByNewest));
        setcatergoryAdsState(ads.data);
        break;
    }
  };

  const sortHighestFunc = (a, b) => {
    return b.priceAsInt - a.priceAsInt;
  };

  const sortLowestFunc = (a, b) => {
    return a.priceAsInt - b.priceAsInt;
  };

  const [sortByTime, setSortByTime] = useState("All Time");

  useEffect(() => {
    sortAdsByTimePosted();
  }, [sortByTime]);

  let currentDate = new Date();

  const sortAdsByTimePosted = () => {
    switch (sortByTime) {
      case "All Time":
        // setcatergoryAdsState(sortedData);

        if (sortedData.length > 0) {
          setcatergoryAdsState(sortedData);
        } else {
          setcatergoryAdsState(ads.data);
        }
        break;
      case "Today":
        setcatergoryAdsState(
          sortedData.filter(
            (ad: any) =>
              new Date(ad.created_at).getDate() === currentDate.getDate()
          )
        );
        break;
      case "A Week":
        let aweekAgo = new Date();
        aweekAgo.setDate(currentDate.getDate() - 7);
        setcatergoryAdsState(
          sortedData.filter(
            (ad: any) => new Date(ad.created_at).getDate() >= aweekAgo.getDate()
          )
        );
        break;

      case "A Month":
        let amonthAgo = new Date();
        amonthAgo.setDate(currentDate.getDate() - 30);
        setcatergoryAdsState(
          sortedData.filter(
            (ad: any) =>
              new Date(ad.created_at).getDate() >= amonthAgo.getDate()
          )
        );
        break;
      case "A Year":
        let ayearAgo = new Date();
        ayearAgo.setDate(currentDate.getDate() - 360);
        setcatergoryAdsState(
          sortedData.filter(
            (ad: any) => new Date(ad.created_at).getDate() >= ayearAgo.getDate()
          )
        );
        break;
      default:
        break;
    }
  };

  const [sortedData, setsortedData] = useState([]);

  useEffect(() => {
    if (minPrice != 0 && maxPrice != 0) {
      if (minPrice >= 0 && maxPrice == 0) {
        setcatergoryAdsState(
          ads.data?.filter((ad: any) => ad.price >= minPrice)
        );
      } else if (minPrice == 0 && maxPrice >= 0) {
        setcatergoryAdsState(
          ads.data?.filter((ad: any) => ad.price <= maxPrice)
        );
      } else {
        setcatergoryAdsState(
          ads.data?.filter(
            (ad: any) => ad.price >= minPrice && ad.price <= maxPrice
          )
        );
      }
    } else {
      setcatergoryAdsState(ads.data);
    }
  }, [minPrice, maxPrice]);

  useEffect(() => {
    if (price == 90) {
      setcatergoryAdsState(ads.data?.filter((ad: any) => ad.price <= 90));
    }

    switch (price) {
      case 90:
        //  ad.price <= price;

        setcatergoryAdsState(
          ads.data?.filter((ad: any) => {
            return ad.price < 90;
          })
        );
        break;
      case 700:
        setcatergoryAdsState(
          ads.data?.filter((ad: any) => ad.price >= price && ad.price <= 800)
        );

        break;
      case 800:
        setcatergoryAdsState(
          ads.data?.filter((ad: any) => ad.price >= price && ad.price <= 2700)
        );
        break;
      case 2700:
        setcatergoryAdsState(
          ads.data?.filter((ad: any) => ad.price >= price && ad.price <= 8400)
        );
        // ad.price >= price && ad.price <= 8400;
        break;
      case 8400:
        setcatergoryAdsState(
          ads.data?.filter(
            (ad: any) => ad.price >= price && ad.price <= 10000000
          )
        );
        break;
      default:
        // setcatergoryAdsState(ads.data?.filter((ad: any) => ad.price >= price));
        setcatergoryAdsState(ads.data);
        break;
    }

    // if (price > 0) {
    //   setcatergoryAdsState(
    //     data.data.data.data.filter((ad: any) => {
    //       if (price == 90) {
    //         ad.price <= price;
    //       } else if (price == 8400) {
    //         ad.price >= price;
    //       }

    //  switch (price) {
    //   case 90:
    //      ad.price <= price;
    //     break;
    //   case 700:
    //     ad.price >= price && ad.price <= 800;
    //     break;
    //   case 800:
    //     ad.price >= price && ad.price <= 2700;
    //     break;
    //   case 2700:
    //     ad.price >= price && ad.price <= 8400;
    //     break;
    //   case 8400:
    //     ad.price >= price;
    //     break;
    //   default:
    //     ad.price >= price;
    //     break;
    // }
    //     })
    //   );
    // }
  }, [price]);

  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">
            {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="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>
          </div>
          <OnpageSearch
            category={ads_category?.toString().replace("-", " ")}
            unReplacedString={ads_category?.toString()}
          />
        </div>
      </div>
      {/* end of mobile version */}

      {/* desktop version */}
      {/* ad space */}
      <div className="container hidden mx-auto md:flex flex-col justify-center items-center mt-16">
        <div className="w-10/12 flex justify-center items-center 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="hidden container mx-auto md:flex">
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link href={"/"}>Ashantiweb</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link href={"/ads"}>Classifieds</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link href={`/ads/${ads_category}`}>
              {ads_category?.toString().replaceAll("-", " ")}
            </Link>
          </Breadcrumb.Item>
        </Breadcrumb>
      </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
            setPrice={setPrice}
            setMinPrice={setminPrice}
            setMaxPrice={setmaxPrice}
            categoryFilterFields={categoryFilterFields}
          />
        </div>
        <div className="w-full md:w-9/12 mt-10">
          <div className="flex justify-end">
            <div className="mb-4 flex justify-end">
              <div className="text-gray-600">
                <SortingBy setSortBy={setsortByState} /> |{" "}
                <span className="font-bold">{sortByState}</span> |{" "}
                <SortByTime setSortByTime={setSortByTime} /> :{" "}
                <span className="font-bold">{sortByTime}</span>
              </div>
            </div>
          </div>

          {catergoryAdsState?.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
              {catergoryAdsState?.map((ads: any, i: number) => {
                return (
                  <Link
                    href={"/ad/" + ads.slug}
                    key={i}
                    className="cursor-pointer"
                    passHref
                  >
                    <a>
                      <div
                        key={i}
                        className="cursor-pointer  flex border shadow-md rounded-md"
                      >
                        <div className="h-40 md:h-44 lg:h-44 w-1/2 relative">
                          <Image
                            layout="fill"
                            src={ads?.picture}
                            alt={ads?.name}
                            placeholder="blur"
                            blurDataURL="/assets/images/preloader/preloader-static6.png"
                          />
                        </div>
                        <div className="p-2 ml-2 w-1/2">
                          <p className="font-normal text-gray-700 mb-2">
                            {ads?.name}
                          </p>
                          {ads?.priceAsInt ? (
                            <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>

      <div className="container mt-10">
        <div className="w-6/12 h-40 flex justify-center items-center  text-black center">
          <ins
            className="adsbygoogle"
            style={{ display: "block", width: "100%" }}
            data-ad-client="ca-pub-1110030198957831"
            data-ad-slot="9306370885"
            data-ad-format="auto"
            data-full-width-responsive="true"
          ></ins>

          {/* <div className="w-full h-60 bg-green-700"></div> */}
          {/* <GAdsense width="100%" adFormat="auto" isResponsive={true} adSlot="9306370885" /> */}
        </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;

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

  const classified = await classifiedCategories();

  //fetch ads for the category
  const data = await fetchAdsInCategoryGeneral(ads_category);

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

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

export default AdsCategory;