---
import AppLayout from "components/AppLayout/AppLayout.astro";
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
import Attributes from "components/Attributes.astro";
import AudioPlayer from "components/AudioPlayer.astro";
import Credits from "components/Credits.astro";
import DownloadButton from "components/DownloadButton.astro";
import RichText from "components/RichText/RichText.astro";
import { getI18n } from "src/i18n/i18n";
import { payload } from "src/utils/payload";
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
import { fetchOr404 } from "src/utils/responses";

const { id } = Astro.params;
const audio = await fetchOr404(() => payload.getAudioByID(id!));
if (audio instanceof Response) {
  return audio;
}

const { getLocalizedMatch, t, formatFilesize, formatDate } = await getI18n(
  Astro.locals.currentLocale
);
const {
  translations,
  attributes,
  filename,
  url,
  credits,
  filesize,
  createdAt,
  updatedAt,
  thumbnail,
} = audio;

const { pretitle, title, subtitle, description } = getLocalizedMatch(translations);

const smallTitle = !subtitle && !pretitle;

const metaAttributes = [
  ...(filename && title !== filename
    ? [
        {
          title: t("global.media.attributes.filename"),
          icon: "material-symbols:audio-file-outline",
          values: [{ name: filename }],
          withBorder: false,
        },
      ]
    : []),
  {
    title: t("global.media.attributes.filesize"),
    icon: "material-symbols:hard-drive-outline",
    values: [{ name: formatFilesize(filesize) }],
    withBorder: false,
  },
  {
    title: t("global.media.attributes.createdAt"),
    icon: "material-symbols:calendar-add-on-outline",
    values: [{ name: formatDate(new Date(createdAt)) }],
    withBorder: false,
  },
  {
    title: t("global.media.attributes.updatedAt"),
    icon: "material-symbols:edit-calendar",
    values: [{ name: formatDate(new Date(updatedAt)) }],
    withBorder: false,
  },
];
---

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

<AppLayout
  openGraph={{
    thumbnail,
    audio,
    description: description ? formatRichTextToString(description) : undefined,
    title: formatInlineTitle({ pretitle, title, subtitle }),
  }}>
  <div id="container">
    <AudioPlayer audio={audio} />

    <div id="info">
      {
        smallTitle ? (
          <h1>{title}</h1>
        ) : (
          <AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} />
        )
      }
      {description && <RichText content={description} />}
      {attributes.length > 0 && <Attributes attributes={attributes} />}
      {credits.length > 0 && <Credits credits={credits} />}
      {metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
      <DownloadButton href={url} filename={filename} />
    </div>
  </div>
</AppLayout>

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

<style>
  #container {
    display: flex;
    flex-direction: column;
    gap: 6em;
    margin-top: 6em;
    align-items: center;

    > :global(audio) {
      width: 100%;
    }

    h1 {
      max-width: 35em;
    }

    & > #info {
      display: flex;
      flex-direction: column;
      gap: 4em;
      align-items: start;

      @media (max-width: 35rem) {
        gap: 6em;
      }
    }
  }
</style>