import ImageWithFallback from "@/components/layout/ImageWithFallback";
import LayoutWithNav from "@/components/layout/LayoutWithNav";
import StandardContainer from "@/components/layout/StandardContainer";
import { fetchShas, fetchVlogDetail } from "apiCalls/apiEndpoints";
import { NextSeo } from "next-seo";
import Link from "next/link";
import { useRouter } from "next/router";
import { domToReact } from "html-react-parser";
import { formatSentence } from "utilFuncs/utilFunctions";
import { useQuery } from "react-query";
import YoutubeEmbed from "@/components/vlog_comps/YoutubeEmbed";

function VlogDetail({ vlogDetail }: any) {
  <NextSeo
    title="Vlogs | Ashantiweb"
    description="Watch Videos About Ashanti Region on Ashantiweb"
  />;

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

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

  //main item
  const mainItem = vlogDetail?.data?.find(
    (item: any) => item.slug == vlog_detail
  );

  console.log(mainItem);

  const options = {
    replace: ({ attribs, children }) => {
      return (
        <div style={{ width: "100%" }} className="text-gray-600">
          {domToReact(children)}
        </div>
      );
    },
  };

  return (
    <LayoutWithNav>
      <NextSeo
        title={`Vlogs - ${mainItem.title}`}
        description={mainItem.title}
      />
      <StandardContainer>
        <div className="flex">
          <div className="w-full lg:w-9/12">
            {/* <span>
              {" "}
              <Link href="/vlogs">/ Vlogs</Link>
            </span> */}
            <div className="w-full">
              <span>
                {" "}
                <Link href="/vlogs">/ Vlogs</Link>
              </span>
              <h2 className="text-xl font-semibold">{mainItem.title}</h2>
              <p className="text-sm text-gray-500 mt-2">{mainItem.date}</p>
              <div className="w-full h-full  mt-2">
                {/* {mainItem.embed_url && parse(mainItem.embed_url)} */}

                <YoutubeEmbed embedId={mainItem.external_url.split("=")[1]} />
                {/* {mainItem.external_url} */}
                {/* <iframe  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="MVI 6862" width="100%" height="100%" src={mainItem.external_url} id="widget2"></iframe> */}
              </div>
            </div>

            {/* other items */}
            <div className="w-full mt-5">
              <div className="my-2">
                <h4>Watch Other Videos</h4>
              </div>
              <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
                {vlogDetail?.data
                  ?.filter((vlog: any) => vlog?.slug !== mainItem.slug)
                  .map((vlog: any, i: number) => {
                    return (
                      <Link
                        key={i}
                        href={`/vlogs/` + vlog?.slug}
                        className="border-2 bg-black text-white"
                        passHref
                      >
                        <a className="  text-white rounded-md shadow-md">
                          <div className="w-full h-32 md:h-60 lg:h-36 relative">
                            <ImageWithFallback
                              src={vlog?.picture}
                              alt={vlog?.slug}
                              layout="fill"
                            />
                          </div>
                          <div className="px-2  lg:px-4 sm:px-4 md:px-4 my-4">
                            <p className="text-gray-600 text-sm font-normal flex flex-col justify-end">
                              {formatSentence(vlog?.title)}
                            </p>
                            <p className="text-gray-600 text-sm font-normal relative left-0 bottom-0 mt-3">
                              {vlog?.date}
                            </p>
                          </div>
                        </a>
                      </Link>
                    );
                  })}
              </div>
            </div>
          </div>
          {/* self hosted ad here */}
          <div className="hidden lg:w-3/12">
            {/* <h2>alsdjas;ljaflk</h2> */}
          </div>
          {/* self hosted ad here */}
        </div>
      </StandardContainer>
    </LayoutWithNav>
  );
}

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

  const { vlog_detail } = params;

  const vlogSlug = await fetchVlogDetail(vlog_detail);

  console.log("vlogSlug", vlogSlug);

  return {
    props: {
      vlogDetail: vlogSlug.data,
    },
  };
}

export default VlogDetail;