---
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";
import CollectiblePreview from "components/Previews/CollectiblePreview.astro";
import PagePreview from "components/Previews/PagePreview.astro";
import { formatRichTextToString } from "src/utils/format";

const { slug } = Astro.params;

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

const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
const meta = getLocalizedMatch(folder.translations);

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

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

<AppLayout
  title={meta.name}
  openGraph={{
    title: meta.name,
    description: meta.description && formatRichTextToString(meta.description),
    thumbnail: folder.lightThumbnail?.url ?? folder.darkThumbnail?.url,
  }}>
  {
    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 id="files">
      {
        folder.files.map(({ relationTo, value }) => {
          switch (relationTo) {
            case "collectibles":
              return <CollectiblePreview collectible={value} />;

            case "pages":
              return <PagePreview page={value} />;

            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;
    }

    & > #files {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: clamp(6px, 2vmin, 16px);
      place-items: start;
    }
  }
</style>