---
import AppLayout from "components/AppLayout/AppLayout.astro";
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
import Attributes from "components/Attributes.astro";
import Credits from "components/Credits.astro";
import DownloadButton from "components/DownloadButton.astro";
import RichText from "components/RichText/RichText.astro";
import VideoPlayer from "components/VideoPlayer.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.id!;
const video = await fetchOr404(Astro, () => payload.getVideoByID(id));
if (video instanceof Response) {
  return video;
}

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

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

const metaAttributes = [
  ...(filename && title !== filename
    ? [
        {
          title: t("global.media.attributes.filename"),
          icon: "material-symbols:video-file",
          values: [{ name: filename }],
          withBorder: false,
        },
      ]
    : []),
  {
    title: t("global.media.attributes.filesize"),
    icon: "material-symbols:hard-drive",
    values: [{ name: formatFilesize(filesize) }],
    withBorder: false,
  },
  {
    title: t("global.media.attributes.createdAt"),
    icon: "material-symbols:calendar-add-on",
    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={{
    title: formatInlineTitle({ pretitle, title, subtitle }),
    description: description && formatRichTextToString(description),
    thumbnail,
    video,
  }}>
  <div id="container">
    <VideoPlayer class="video_id-video-player" video={video} />

    <div id="info">
      <AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} lang={language} />
      {description && <RichText content={description} context={{ lang: language }} />}
      {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;
    align-items: center;

    h1 {
      max-width: 35em;
    }

    & > .video_id-video-player {
      max-height: 60vh;
      width: auto;
    }

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

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