---
export const prerender = false;

import PageLayout from "@/layouts/Base.astro";
import { getFormattedDate } from "@/utils";

type Artwork = {
	date: string;
	artwork_id: number;
	title: string;
	artist_display: string | null;
	date_display: string | null;
	medium_display: string | null;
	dimensions: string | null;
	place_of_origin: string | null;
	credit_line: string | null;
	short_description: string | null;
	image_id: string | null;
	image_url: string | null;
	source_url: string | null;
};

const meta = {
	title: "/art-calendar",
	description:
		"A different painting every day from the Art Institute of Chicago.",
};

const FEED_URL = "https://easel.stevedylan.dev/feed.xml";
const today = new Date();

let artwork: Artwork | null = null;
let error: string | null = null;

try {
	const res = await fetch("https://easel.stevedylan.dev/api/today", {
		headers: { Accept: "application/json" },
	});
	if (!res.ok) throw new Error(`easel returned ${res.status}`);
	artwork = (await res.json()) as Artwork;
} catch (e) {
	error = e instanceof Error ? e.message : "Failed to reach easel API";
}

Astro.response.headers.set(
	"Cache-Control",
	"public, max-age=3600, s-maxage=86400",
);
---

<PageLayout meta={meta}>
  <div class="flex min-h-screen flex-col items-start justify-start gap-6">
    <div class="flex flex-col gap-1 w-full">
      <div class="flex flex-row justify-between items-center w-full">
        <h1 class="title">/art-calendar</h1>
        <div class="flex gap-2 items-center">
          <a
            class="inline-block p-2 sm:hover:text-link"
            href={FEED_URL}
            target="_blank"
            rel="noopener noreferrer"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <g
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                ><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"
                ></path><circle cx="5" cy="19" r="1"></circle></g
              >
            </svg>
            <span class="sr-only">RSS</span>
          </a>
        </div>
      </div>
      <p class="text-sm opacity-70">
        {getFormattedDate(today)}
      </p>
    </div>
    {
      error || !artwork ? (
        <p class="text-red-400 text-sm">
          Couldn't load today's painting{error ? `: ${error}` : ""}.
        </p>
      ) : (
        <article class="flex flex-col w-full gap-6">
          {artwork.image_url && (
            <img
              src={artwork.image_url}
              alt={artwork.title}
              loading="eager"
              class="w-full h-auto"
            />
          )}
          <div class="flex flex-col gap-1">
            <h2 class="text-xl italic text-accent-2">{artwork.title}</h2>
            {artwork.artist_display && (
              <p class="text-sm whitespace-pre-line">
                {artwork.artist_display}
              </p>
            )}
          </div>
          <dl class="grid grid-cols-1 sm:grid-cols-[max-content_1fr] gap-x-6 gap-y-2 text-sm">
            {artwork.date_display && (
              <>
                <dt class="opacity-50 uppercase tracking-widest text-xs">
                  Date
                </dt>
                <dd>{artwork.date_display}</dd>
              </>
            )}
            {artwork.place_of_origin && (
              <>
                <dt class="opacity-50 uppercase tracking-widest text-xs">
                  Origin
                </dt>
                <dd>{artwork.place_of_origin}</dd>
              </>
            )}
            {artwork.medium_display && (
              <>
                <dt class="opacity-50 uppercase tracking-widest text-xs">
                  Medium
                </dt>
                <dd>{artwork.medium_display}</dd>
              </>
            )}
            {artwork.dimensions && (
              <>
                <dt class="opacity-50 uppercase tracking-widest text-xs">
                  Dimensions
                </dt>
                <dd>{artwork.dimensions}</dd>
              </>
            )}
            {artwork.credit_line && (
              <>
                <dt class="opacity-50 uppercase tracking-widest text-xs">
                  Credit
                </dt>
                <dd>{artwork.credit_line}</dd>
              </>
            )}
          </dl>
          {artwork.short_description && (
            <p class="text-sm">{artwork.short_description}</p>
          )}
          {artwork.source_url && (
            <a
              class="style-link self-start"
              href={artwork.source_url}
              target="_blank"
              rel="noopener"
            >
              View on artic.edu
            </a>
          )}
        </article>
      )
    }
  </div>
</PageLayout>