---
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";
import ImagePreview from "components/Previews/ImagePreview.astro";
import AudioPreview from "components/Previews/AudioPreview.astro";
import VideoPreview from "components/Previews/VideoPreview.astro";
import AppLayout from "components/AppLayout/AppLayout.astro";
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
import { payload } from "src/services";
import RichText from "components/RichText/RichText.astro";
import FilePreview from "components/Previews/FilePreview.astro";
import { Collections } from "src/shared/payload/constants";

const slug = Astro.params.slug!;

const response = await fetchOr404(() => payload.getFolder(slug));
if (response instanceof Response) {
  return response;
}
Astro.locals.sdkCalls.add(response.endpointCalled);
const { files, parentPages, sections, translations } = response.data;

const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
const { language, title, description } = getLocalizedMatch(translations);
---

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

<AppLayout
  openGraph={{
    title: title,
    description: description && formatRichTextToString(description),
  }}
  parentPages={parentPages}
  class="app">
  <AppLayoutTitle title={title} lang={language} />
  {description && <RichText content={description} context={{ lang: language }} />}

  <div id="main" class:list={{ complex: sections.type === "multiple" }}>
    {
      sections.type === "single" && sections.subfolders.length > 0 ? (
        <FoldersSection folders={sections.subfolders} />
      ) : (
        sections.type === "multiple" &&
        sections.sections.length > 0 && (
          <div id="sections">
            {sections.sections.map(({ subfolders, translations }) => {
              const { language, name } = getLocalizedMatch(translations);
              return <FoldersSection folders={subfolders} title={name} lang={language} />;
            })}
          </div>
        )
      )
    }

    <div id="files">
      {
        files.map(({ relationTo, value }) => {
          switch (relationTo) {
            case Collections.Collectibles:
              return <CollectiblePreview collectible={value} />;

            case Collections.Pages:
              return <PagePreview page={value} />;

            case Collections.Images:
              return <ImagePreview image={value} />;

            case Collections.Audios:
              return <AudioPreview audio={value} />;

            case Collections.Videos:
              return <VideoPreview video={value} />;

            case Collections.Files:
              return <FilePreview file={value} />;

            default:
              return <ErrorMessage title={`Unknown file type: ${relationTo}`} />;
          }
        })
      }
    </div>
  </div>
</AppLayout>

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

<style>
  .app {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  #main {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    gap: 4em;

    &.complex {
      gap: 6em;

      & > #sections {
        display: flex;
        flex-direction: column;
        gap: 4em;
      }
    }

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

      @media (max-width: 40rem) {
        grid-template-columns: 1fr 1fr;
        row-gap: 12px;
      }

      @media (max-width: 24rem) {
        grid-template-columns: 1fr;
      }
    }
  }
</style>