import { writeComponent } from "./writeComponent";
import { unified } from "unified";
import rehypeParse from "rehype-parse";
import rehypeStringify from "rehype-stringify";
import rehypeDocument from "rehype-document";
import { writePageMain } from "./writePageMain";
import rehypeFormat from "rehype-format";
import { extractFrontmatter } from "./extractFrontmatter";

//NOTE right now we're strinfigying, connecting the strings, then parsing for
//more rehype processing. I'm sure there's a more correct way to do this, but
//that can happen later

export async function joinComponents(filepath) {
  const frontmatter = await extractFrontmatter(filepath);
  const recipe = Object.keys(frontmatter).filter((x) =>
    ["before", "header", "footer", "after"].includes(x),
  );
  let union = "";

  //HACK
  if (recipe.includes("header")) {
    union += await writeComponent(frontmatter.header, frontmatter, "header");
  }
  if (recipe.includes("before")) {
    union += await writeComponent(frontmatter.before, frontmatter);
  }
  union += await writePageMain(filepath);

  if (recipe.includes("after")) {
    union += await writeComponent(frontmatter.after, frontmatter);
  }
  if (recipe.includes("footer")) {
    union += await writeComponent(frontmatter.footer, frontmatter, "footer");
  }
  //HACK

  const processor = unified()
    .use(rehypeParse, { fragment: true })
    .use(rehypeDocument, {
      css: frontmatter.css ?? "style.css",
      title: frontmatter?.title ?? frontmatter?.filename ?? "title",
      link: [{ href: "favicon.png", rel: "icon", type: "image/png" }],
    })
    .use(rehypeFormat)
    .use(rehypeStringify);

  const output = await processor.process(union);
  return output.value;
}