---
import MainLayout from "../../layouts/main.astro";
import { Client } from "@notionhq/client";
import { NotionToMarkdown } from "notion-to-md";
import {marked} from "marked";

const notion = new Client({
  auth: "secret_AXxqx7iaGrcuAcG5ib9l6smC0jqaEeLDb6G1jtUwI5i",
});

export async function getStaticPaths() {
  const pageId = "87ff5ccc453349de8aa5ae32833817e3";

  const notionPagesContent = await (
    await fetch(
      `https://api.notion.com/v1/blocks/${pageId}/children?page_size=100`,
      {
        headers: {
          Authorization: `Bearer secret_AXxqx7iaGrcuAcG5ib9l6smC0jqaEeLDb6G1jtUwI5i`,
          "Notion-Version": "2022-02-22",
        },
      }
    )
  ).json();

  const pages = notionPagesContent.results.filter(
    (page) => page.type === "child_page"
  );

  return pages.map((page) => ({
    params: {
      id: page.id,
    },
  }));
}

const { id } = Astro.params;

const pageData = await (
  await fetch(`https://api.notion.com/v1/pages/${id}`, {
    headers: {
      Authorization: `Bearer secret_AXxqx7iaGrcuAcG5ib9l6smC0jqaEeLDb6G1jtUwI5i`,
      "Notion-Version": "2022-02-22",
    },
  })
).json();

const n2m = new NotionToMarkdown({ notionClient: notion });

// @ts-ignore
const mdblocks = await n2m.pageToMarkdown(id);
const mdString = n2m.toMarkdownString(mdblocks);
const generalString = mdString.replace(/(\r\n|\n|\r)/gm, " ").replace(/(-|#)/gm, "").replaceAll("  ", " ");
const mdArray = mdString.split("\n");

for (let i = 0; i < mdArray.length; i++) {
  if (mdArray[i].includes("https://www.youtube.com")) {
    const videoId = mdArray[i].split("watch?v=")[1].split("&")[0];
    mdArray[i] = '<iframe id="' + videoId + '" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>';
  }
}

const mdGood = mdArray.join("\n");

const htmlData = marked.parse(mdGood);

const title = pageData.properties.title.title[0].plain_text.split(" | ").splice(0, pageData.properties.title.title[0].plain_text.split(" | ").length - 1).join(" - ");
const description = generalString.substring(0, 250);
console.log(pageData.cover)
const image = pageData.cover.external.url;
---

<MainLayout
  title={title}
  description={description}
  image={image}
  blog={false}
  hasMainTitle={true}
>
  <div class="relative w-full aspect-video flex justify-center items-center mb-4">
    <img src={image} alt={title} class="w-full h-full object-cover absolute top-0 left-0">
    <h1 class="z-10 text-white px-8 text-sm md:text-xl m-0">{title}</h1>
  </div>
  <div set:html={htmlData}></div>
</MainLayout>