import type { NextPage } from "next";
import LayoutWithNav from "@/components/layout/LayoutWithNav";
import {
  classifiedCategories,
  fetchDistricts,
  fetchHomepageAds,
  fetchHomeVlogs,
  fetchLifestyleCat,
  fetchServices,
} from "apiCalls/apiEndpoints";
import { useState, useEffect } from "react";
import { useDistricts } from "context/DistrictContext";
import FeaturedAds from "@/components/featured_ads/FeaturedAds";
import SearchCompOld from "@/components/search/SearchCompOld";
import AshantiConnect from "@/components/ashanti_connect/AshantiConnect";
import AshantiLifeStyle from "@/components/ashanti_lifestyle/AshantiLifeStyle";
import AshantiVlog from "@/components/ashanti_vlog/AshantiVlog";
import { useRouter } from "next/router";
import { NextSeo } from "next-seo";
import { Button, Modal } from "antd";
import CategoryArea from "@/components/category/CategoryArea";
import { isProduction, local_url } from "utilFuncs/utilFunctions";
import { AppstoreAddOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { useUser } from "context/UserContext";
import useInitGAd from "@/components/hooks/useInitGAd";
import FrontServices from "@/components/front_services/FrontServices";

const Home: NextPage = ({
  data,
  lifeStyle,
  vlogs,
  referer,
  serviceAds,
}: any) => {
  const router = useRouter();

  const previousRoute =
    router.asPath !== router.pathname ? router.asPath : null;

  const { setDistricts, setCurrentDistrict } = useDistricts();

  const [isModalOpen, setIsModalOpen] = useState(true);

  const { isAuthenticated } = useUser();

  useInitGAd();

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

  useEffect(() => {
    setDistricts(data.districts);
  }, [data.districts, setDistricts]);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div className={router.pathname === "/vlog" ? "bg-black" : ""}>
      <NextSeo
        title="Home | Ashantimarket.com"
        description="Classifieds, Events, Lifestyles, Jobs, News, Developments, and more"
      />
      <LayoutWithNav page_title="Ashantiweb">
        {/* <SearchComp /> */}

        {referer === local_url("register") && isAuthenticated && (
          <Modal
            title="Thank you for registering"
            open={isModalOpen}
            // onOk={handleOk}
            onCancel={handleCancel}
            footer={null}
          >
            <div className="mb-2">
              {/* <p className="text-gray-700">Welcome to ashantiweb.com, what would you like to do</p> */}
            </div>
            <div className="flex justify-between items-center">
              <Button
                icon={<FullscreenExitOutlined />}
                onClick={handleOk}
                type="default"
              >
                Exit to main page
              </Button>
              <Button
                icon={<AppstoreAddOutlined />}
                onClick={() => router.push("/ads/post")}
                type="primary"
              >
                Post An Advert
              </Button>
            </div>
            {/* <Row gutter={16}>
              <Col className="gutter-row" span={6}>
                <Button type="default">Exit to main page</Button>
              </Col>
              <Col className="gutter-row" span={6}>
                <Button type="primary">Post An Advert</Button>
              </Col>
            </Row> */}
          </Modal>
        )}

        <SearchCompOld />

        <CategoryArea data={data.data.data} />

        <FeaturedAds data={data.homePageAds} />

        <AshantiLifeStyle lifeStyle={lifeStyle} />
        {/* place ads here on local */}

        {/* <GAdLifestyle/>             */}

        {/* ashantivlog ads in ashantivlog component folder as a .txt */}
        <AshantiVlog vlogs={vlogs} />
        {/* 
        <FrontServices servicesAds={serviceAds} />

        <AshantiConnect /> */}
      </LayoutWithNav>
    </div>
  );
};

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

  const data = await classifiedCategories();
  const districts = await fetchDistricts();
  const homePageAds = await fetchHomepageAds();
  const lifeStyle = await fetchLifestyleCat();
  const vlogs = await fetchHomeVlogs();
  const services = await fetchServices();

  console.log("services", services.data.data.data);
  console.log("home ads", homePageAds);

  return {
    props: {
      data: {
        data: data.data,
        districts: districts.data,
        homePageAds: homePageAds.data,
      },
      lifeStyle: lifeStyle.data,
      vlogs: vlogs.data,
      referer: req.headers.referer ?? null,
      serviceAds: services.data.data.data,
    }, // will be passed to the page component as props
  };
}

export default Home;