---
import { parseISO, format } from "date-fns";;
import Layout from "@layouts/Layout.astro";
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
import Warning from "@components/blocks/banners/Warning.astro";
import { fetchGlobalData } from "@utils/data/global/index.js";
import { md } from "@utils/helpers/general.js";
import icons from "@cdransf/astro-tabler-icons";

const { globals, movie } = await fetchGlobalData(Astro, Astro.url.pathname);

if (!movie) return Astro.redirect("/404", 404);

const {
  IconArrowLeft,
  IconHeart,
  IconNeedle,
  IconCircleCheck,
} = icons;
const pageTitle = `${movie.title} / Movies`;
const description = movie.description || `Details about ${movie.title}.`;
const alt = `${movie.title} / ${movie.year}${movie.rating ? ` (${movie.rating})` : ""}`;
---

<Layout
  pageTitle={pageTitle}
  description={description}
  pageUrl={Astro.url.pathname}
  ogImage={movie.backdrop}
>
  <a class="back-link" href="/watching" title="Go back to the watching index page">
    <div set:html={IconArrowLeft({ size: 18 })}/> Back to watching
  </a>
  <article class="watching focus">
    <img
      srcset={`
        ${globals.cdn_url}${movie.backdrop}?class=bannersm&type=webp 256w,
        ${globals.cdn_url}${movie.backdrop}?class=bannermd&type=webp 512w,
        ${globals.cdn_url}${movie.backdrop}?class=bannerbase&type=webp 1024w
      `}
      sizes="(max-width: 450px) 256px,
        (max-width: 850px) 512px,
        1024px"
      src={`${globals.cdn_url}${movie.backdrop}?class=bannersm&type=webp`}
      alt={alt}
      class="image-banner"
      loading="eager"
      decoding="async"
      width="256"
      height="180"
    />
    <div class="media-meta">
      <span class="title">
        <strong>{movie.title}</strong>
        {movie.year && !movie.rating && ` (${movie.year})`}
      </span>
      {
        movie.rating && (
          <span>
            {movie.rating}
            {movie.year && ` (${movie.year})`}
          </span>
        )
      }
      {
        movie.favorite && (
          <span class="sub-meta favorite">
            <div set:html={IconHeart({ size: 18 })}/> This is one of my favorite movies!
          </span>
        )
      }
      {
        movie.tattoo && (
          <span class="sub-meta tattoo">
            <div set:html={IconNeedle({ size: 18 })}/> I have a tattoo inspired by this movie!
          </span>
        )
      }
      {
        movie.collected && (
          <span class="sub-meta collected">
            <div set:html={IconCircleCheck({ size: 18 })}/> This movie is in my collection!
          </span>
        )
      }
      {
        movie.lastWatched && (
          <span class="sub-meta">
            Last watched on{" "}
            {format(parseISO(movie.lastWatched), "PPPP")}
          </span>
        )
      }
    </div>

    {movie.review && (
      <>
        <h2>My thoughts</h2>
        <Warning text="There are probably spoilers after this banner — this is a warning about them." />
        <div set:html={md(movie.review)}/>
      </>
    )}

    <AssociatedMedia
      artists={movie.artists}
      books={movie.books}
      genres={movie.genres}
      movies={movie.related_movies}
      posts={movie.posts}
      shows={movie.shows}
    />

    {movie.description && (
      <>
        <h2>Overview</h2>
        <div set:html={md(movie.description)}/>
      </>
    )}
  </article>
</Layout>