import LayoutWithNav from "@/components/layout/LayoutWithNav";
import StandardContainer from "@/components/layout/StandardContainer";
import { fetchDistricts, fetchShas, fetchVlogs } from "apiCalls/apiEndpoints";
import { useDistricts } from "context/DistrictContext";
import Link from "next/link";
import { useEffect } from "react";

import { NextSeo } from "next-seo";
import VlogItem from "@/components/ashanti_vlog/VlogItem";
import { useQuery } from "react-query";
import Image from "next/image";
import MainPageHeader from "@/components/headers/MainPageHeader";
import useInitGAd from "@/components/hooks/useInitGAd";

function Vlog({ districts, vlogs }: any) {
  const { setDistricts } = useDistricts();

  useInitGAd();

  const vlogData = vlogs.data;

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

  const {
    data: vlogsha,
    isLoading: shatwoLoading,
    isSuccess: shaTwoSuccess,
  } = useQuery(["vlog-sha", "vlog", "vlogad"], fetchShas);

  return (
    <LayoutWithNav>
      <NextSeo
        title="Vlogs | Ashantiweb"
        description="Watch Videos About Ashanti Region on Ashantiweb"
      />
      <StandardContainer>
        <div className="w-full flex">
          <div className="w-full xl:w-10/12">
            <MainPageHeader title="Ashantiweb Vlogs" />
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-4">
              {vlogData.map((vlog: any, i: number) => (
                <>
                  <VlogItem vlog={vlog} />
                </>
              ))}
            </div>
          </div>
          <div className="pl-10 hidden xl:block xl:w-3/12  ">
            <div className="mt-16">
              {process.env.NODE_ENV != "production" && (<div className="w-full h-11 bg-slate-500"></div>)}
              {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>
              )}

              {shatwoLoading ? (
                <p>loading, please wait</p>
              ) : (
                vlogsha?.data.url && (
                  <Link href={vlogsha?.data?.url} passHref>
                    <div className="bg-gray-300 center w-full h-[145px] relative">
                      <Image
                        src={vlogsha?.data?.mediaGallery?.medium}
                        alt={vlogsha?.data?.title}
                        layout="fill"
                        objectFit="cover"
                      />
                    </div>
                  </Link>
                )
              )}
            </div>
          </div>
        </div>
      </StandardContainer>
    </LayoutWithNav>
  );
}

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

  const districts = await fetchDistricts();
  const vlogsData = await fetchVlogs();

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

export default Vlog;