export const runtime = 'edge' // 'nodejs' (default) | 'edge'

import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "../../components/builder";
import Header from "@components/Header"
import Footer from "@/components/Footer";

// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);

export default async function Page(props) {
  let cleanedSlug = props?.params?.page?.join("/") || "";
  if (cleanedSlug === "index") {
    cleanedSlug = "";
  }
  const uri = "/" + decodeURI(cleanedSlug); // All that for what, Vercel?!
  console.log('attempting to get data for: ' + uri)
  const content = await builder
    // Get the page content from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: uri,
      },
    })
    // Convert the result to a promise
    .toPromise();

  // Header data
  let header = await builder.get("header").toPromise();
  const headerNav = await builder.get("nav-menus", { 
    query: { id: header.data.navMenu.id } 
  }).toPromise();
  // Replace the header nav menu with the data from Builder
  header.data.navMenu = headerNav.data;

  // Footer data
  const menuIds =[
    '7eda5235332643d9aff34bdb2adb37d8', '9dd6e1f2e0c747f7b703024f3a246a06', '6b3264e6a4204527a5b185d1b21af166'
  ];
  const navMenus = await Promise.all(menuIds.map(id => 
    builder.get('nav-menus', { query: { id } }).toPromise()
  ));

  const footerData = await builder.get('footer').toPromise();

  return (
    <>
      <Header data={header.data} />
      {/* Render the Builder page */}
      <RenderBuilderContent content={content} />
      <Footer navMenus={navMenus} footerData={footerData} />
    </>
  );
}