import { useEffect } from "react";
import type { GetStaticPropsContext } from "next";
import { useRouter } from "next/router";

import MDXWrapper from "@/components/mdx-wrapper";
import NestedLayout from "@/components/nested-layout";
import SeoMeta from "@/components/seo-meta";
import { ENABLE_DRAFTS } from "@/config/constants";
import { unwrapArray } from "@/helpers/array";
import { useTheme } from "@/hooks";
import { getAllPagesSlugs, getPageBySlug } from "@/lib/api";
import { useStore } from "@/store";
import { type MDXPage } from "@/types";

interface MDXPageProps {
  page: MDXPage | null;
  error: boolean;
}

export default function MDXPage({ page, error }: MDXPageProps) {
  const setCurrentTheme = useStore.use.setCurrentTheme();
  const router = useRouter();

  useTheme();

  useEffect(() => {
    if (error || page === null) {
      router.push("/404");
    }
  }, [error, page, router]);

  useEffect(() => {
    if (page?.frontMatter.theme) setCurrentTheme(page.frontMatter.theme);
    return () => setCurrentTheme();
  }, [page?.frontMatter.theme, setCurrentTheme]);

  const inner = page && <MDXWrapper mdxSource={page.mdxSource} />;

  return (
    <>
      <SeoMeta
        title={page?.frontMatter.title}
        description={page?.frontMatter.description}
      />
      {page?.frontMatter.layout === "secondary" ? (
        <NestedLayout>{inner}</NestedLayout>
      ) : (
        inner
      )}
    </>
  );
}

export async function getStaticProps(context: GetStaticPropsContext) {
  const { params } = context;

  if (params && params.slug) {
    const slug = unwrapArray(params.slug);
    const page = await getPageBySlug(slug, ENABLE_DRAFTS);
    return { props: { page, error: !page } };
  }

  return {
    props: {
      page: null,
      error: true,
    },
  };
}

export async function getStaticPaths() {
  const slugs = await getAllPagesSlugs(ENABLE_DRAFTS);

  return {
    paths: slugs.map((slug: string) => ({
      params: { slug },
    })),

    fallback: false,
  };
}