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

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

const {
  nextImageHref,
  previousImageHref,
  image: { url, width, height },
  tagGroups = [],
  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:
        (tagGroups && tagGroups.length > 0) || (credits && credits.length > 0) || description,
    }}>
    {
      smallTitle ? (
        <h1>{title}</h1>
      ) : (
        <AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} />
      )
    }

    {description && <RichText content={description} />}
    {tagGroups && tagGroups.length > 0 && <TagGroups tagGroups={tagGroups} />}
    {credits && credits.length > 0 && <Credits credits={credits} />}
    {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: 1em;
      align-items: center;

      &.complex {
        gap: 2em;
        align-items: start;
      }

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