---
import Button from "components/Button.astro";
import {
  type EndpointCredit,
  type PayloadImage,
  type RichTextContent,
} from "src/shared/payload/payload-sdk";
import Credits from "./Credits.astro";
import DownloadButton from "./DownloadButton.astro";
import AppLayoutTitle from "./AppLayout/components/AppLayoutTitle.astro";
import type { ComponentProps } from "astro/types";
import AppLayoutDescription from "./AppLayout/components/AppLayoutDescription.astro";
import Attributes from "./Attributes.astro";

interface Props {
  previousImageHref?: string | undefined;
  nextImageHref?: string | undefined;
  image: PayloadImage;
  pretitle?: string | undefined;
  title: string;
  subtitle?: string | undefined;
  description?: RichTextContent | undefined;
  attributes?: ComponentProps<typeof Attributes>["attributes"] | undefined;
  metaAttributes?: ComponentProps<typeof Attributes>["attributes"] | undefined;
  credits?: EndpointCredit[] | undefined;
  filename?: string | undefined;
}

const {
  nextImageHref,
  previousImageHref,
  image: { url, width, height },
  attributes = [],
  metaAttributes = [],
  credits = [],
  description,
  pretitle,
  title,
  subtitle,
  filename,
} = Astro.props;

const smallTitle = !subtitle && !pretitle;
---

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

<div id="container">
  <div id="image-viewer" class:list={{ "with-buttons": previousImageHref || nextImageHref }}>
    <a
      class:list={{ hidden: !previousImageHref }}
      href={previousImageHref}
      data-astro-history="replace">
      <Button icon="material-symbols:chevron-left" />
    </a>

    <a href={url} target="_blank"><img src={url} width={width} height={height} /></a>

    <a class:list={{ hidden: !nextImageHref }} href={nextImageHref} data-astro-history="replace">
      <Button icon="material-symbols:chevron-right" />
    </a>
  </div>

  <div
    id="info"
    class:list={{
      complex:
        attributes.length > 0 || metaAttributes.length > 0 || credits.length > 0 || description,
    }}>
    <div>
      {
        smallTitle ? (
          <h1>{title}</h1>
        ) : (
          <AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} />
        )
      }
      {description && <AppLayoutDescription description={description} />}
    </div>
    {attributes.length > 0 && <Attributes attributes={attributes} />}
    {credits.length > 0 && <Credits credits={credits} />}
    {metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
    {filename && <DownloadButton href={url} filename={filename} />}
  </div>
</div>

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

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

    & > #image-viewer {
      &.with-buttons {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 1em;
        place-items: center;
      }

      & > a.hidden {
        visibility: hidden;
      }

      img {
        max-height: 70vh;
        max-width: 100%;
        height: auto;
        width: auto;
      }
    }

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

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

      &:not(.complex) {
        align-items: center;
        gap: 2em;
      }

      & > h1 {
        max-width: 35em;
        overflow-wrap: anywhere;
      }
    }
  }
</style>