---
import type { InferEntrySchema } from "astro:content";
import { compareDesc, formatISO } from "date-fns";
import { setCssColors } from "../colors";
import { imageAttrs } from "../pages/works/media";
import Translated from "./Translated.astro";
import WIPIndicator from "./WIPIndicator.astro";

const EXCLUDED_WORKS = ["calen7drier"];

interface Props {
  works: InferEntrySchema<"works">[];
}

const isoDate = (date: Date) => formatISO(date, { representation: "date" });
const preferredDate = ({
  started,
  finished,
  additionalMetadata,
}: {
  started: Date | null;
  finished: Date | null;
  additionalMetadata?: { created?: Date | null | undefined };
}) => {
  if (started && !finished && !additionalMetadata?.created) {
    // Ongoing works
    return new Date();
  }
  return finished ?? started ?? additionalMetadata?.created;
};

function groupBy<T, K extends string | number>(
  items: T[],
  key: (item: T) => K,
): Record<K, T[]> {
  return items.reduce(
    (acc, current) => {
      if (!acc[key(current)]) {
        acc[key(current)] = [];
      }
      acc[key(current)].push(current);
      return acc;
    },
    {} as Record<K, T[]>,
  );
}

function findThumbnailBlock(
  content: InferEntrySchema<"works">["content"],
  sourcePath: string,
) {
  const sourcemap = Object.entries(content)
    .flatMap(([_, { blocks }]) => blocks)
    .find(
      (block) => block.type === "media" && block.relativeSource === sourcePath,
    );

  if (!sourcemap)
    return Object.values(content)
      .flatMap(({ blocks }) => blocks)
      .find(({ type }) => type === "media");

  return sourcemap;
}
---

{
  Object.entries(
    groupBy(
      Astro.props.works.filter(
        (w) =>
          !w.metadata.private &&
          !EXCLUDED_WORKS.includes(w.id) &&
          findThumbnailBlock(w.content, w.metadata.thumbnail ?? ""),
      ),
      ({ metadata }) =>
        preferredDate(metadata)?.getFullYear().toString() ?? "Unknown",
    ),
  )
    .sort(([a], [b]) => b - a)
    .map(([year, works]) => (
      <>
        <p class="year">{year}</p>
        <div class="works-grid">
          {works
            .sort(({ metadata: a }, { metadata: b }) =>
              compareDesc(
                preferredDate(a) ?? new Date(),
                preferredDate(b) ?? new Date(),
              ),
            )
            .map(
              ({
                id,
                content,
                metadata: {
                  wip,
                  colors,
                  started,
                  finished,
                  thumbnail,
                  additionalMetadata,
                },
              }) => {
                const tagline = additionalMetadata?.tagline;
                const date = preferredDate({ started, finished });
                const thumb = findThumbnailBlock(content, thumbnail ?? "")!;
                const attrs = imageAttrs(thumb);
                return (
                  thumb && (
                    <a href={`/${id}`}>
                      <article style={setCssColors(colors)}>
                        {
                          <img
                            {...attrs}
                            style={{
                              width: "100%",
                              height: "auto",
                              objectFit: "cover",
                            }}
                          />
                        }
                        <section class="text">
                          <h2>
                            <Translated
                              fr={
                                content.fr?.title ||
                                content.default?.title ||
                                id
                              }
                              en={
                                content.en?.title ||
                                content.default?.title ||
                                id
                              }
                            />
                            {wip && <WIPIndicator />}
                          </h2>
                          {tagline && (
                            <span class="tagline" i18n>
                              {tagline}
                            </span>
                          )}
                        </section>
                      </article>
                    </a>
                  )
                );
              },
            )}
        </div>
      </>
    ))
}

<style>
  .works-grid {
    --size: 300px;
    display: grid;
    gap: 1em;
    grid-template-rows: masonry;
    grid-template-columns: repeat(auto-fit, var(--size));
  }

  .works-grid a:focus-visible img,
  .works-grid a:hover img {
    scale: 1.11;
  }

  article img {
    transition: scale 0.125s;
  }

  .year {
    font-size: 1.2em;
    font-weight: bold;
    margin: 1em 0;
    font-family:
      Victor Mono,
      monospace;
  }

  article {
    color: var(--primary, black);
    background: var(--secondary, white);
    padding: 1rem;
    max-width: var(--size);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  section.text {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
  }
  a {
    text-decoration: none;
  }
</style>