---
import AppLayout from "components/AppLayout/AppLayout.astro";
import { payload } from "src/shared/payload/payload-sdk";
import RichText from "components/RichText/RichText.astro";
import FoldersSection from "./_components/FoldersSection.astro";
import { fetchOr404 } from "src/utils/responses";
import ErrorMessage from "components/ErrorMessage.astro";
import { getI18n } from "src/i18n/i18n";

const { slug } = Astro.params;
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);

const folder = await fetchOr404(() => payload.getFolder(slug!));
if (folder instanceof Response) {
  return folder;
}
const meta = getLocalizedMatch(folder.translations);

// TODO: handle light and dark illustration for applayout
---

{/* ------------------------------------------- HTML ------------------------------------------- */}

<AppLayout title={meta.name}>
  {
    meta.description && (
      <div slot="header-description">
        <RichText content={meta.description} />
      </div>
    )
  }
  <div id="main">
    {
      folder.sections.type === "single" ? (
        <FoldersSection folders={folder.sections.subfolders} />
      ) : (
        <div id="sections">
          {folder.sections.sections.map(({ subfolders, translations }) => (
            <FoldersSection
              folders={subfolders}
              title={
                getLocalizedMatch<{
                  language: string;
                  name: string | undefined;
                }>(translations).name
              }
            />
          ))}
        </div>
      )
    }

    <div>
      {
        folder.files.map(({ relationTo, value }) => {
          switch (relationTo) {
            case "library-items":
              return <p>Library item not supported yet! {value.slug}</p>;

            case "pages":
              return (
                <a class="pressable" href={getLocalizedUrl(`/pages/${value.slug}`)}>
                  {value.slug}
                </a>
              );

            default:
              return (
                <ErrorMessage
                  title={`Unknown file type: ${relationTo}`}
                  description="Please contact website technical administrator."
                />
              );
          }
        })
      }
    </div>
  </div>
</AppLayout>

{/* ------------------------------------------- CSS -------------------------------------------- */}

<style>
  #main {
    display: grid;
    gap: 4em;

    #sections {
      display: grid;
      gap: 2.5em;
    }
  }
</style>