---
import { defined } from "@utils/anonymous";

interface Props {
  date?: Date;
  years: number[];
  months: number[];
  days?: number[];
}

const { date, years, months, days } = Astro.props;

const dateParts = Astro.params.date?.split("/").map(Number);
const y = dateParts?.[0];
const m = dateParts?.[1];
const d = dateParts?.[2];
let yI = 0;
let mI = 0;
let dI = 0;

const list = new Intl.ListFormat("pt-PT", { type: "unit", style: "narrow" });

const pad = (n: number) => String(n).padStart(2, "0");
---
<nav class="mute small">
  <span role="list">
    Anos:{" "}
    {
      list.formatToParts(
        years.sort().map((y) =>
          new Intl.DateTimeFormat("pt-PT", { year: "numeric" }).format(
            new Date(
              Date.UTC(
                y,
                0,
                3,
                ...[
                  date === undefined
                    ? undefined
                    : date.getTimezoneOffset() / 60,
                  date === undefined
                    ? undefined
                    : date.getTimezoneOffset() % 60,
                ].filter(defined),
              ),
            ),
          )
        ),
      ).map(({ type, value }: { type: string; value: string }) => {
        switch (type) {
          case "element": {
            const year = years[yI++];
            return (
        <span role="listitem"><a
            class:list={[{ active: year === y }]}
            href={`/blog/${year}`}
          >{value}</a></span>
      );
      }
      case "literal": {
        return <span>{value}</span>;
          }
        }
      })
    }
  </span>
  {
    y && (
      <><br /><span role="list">
          Meses:{" "}
          {
            list.formatToParts(
              months.sort().map((m) =>
                new Intl.DateTimeFormat("pt-PT", { month: "short" }).format(
                  new Date(
                    Date.UTC(
                      y,
                      m - 1,
                      3,
                      ...[
                        date === undefined
                          ? undefined
                          : date.getTimezoneOffset() / 60,
                        date === undefined
                          ? undefined
                          : date.getTimezoneOffset() % 60,
                      ].filter(defined),
                    ),
                  ),
                )
              ),
            ).map(({ type, value }: { type: string; value: string }) => {
              switch (type) {
                case "element": {
                  const month = months[mI++];
                  return (
              <span role="listitem"><a
                  class:list={[{ active: month === m }]}
                  href={`/blog/${y}/${pad(month)}`}
                >{value}</a></span>
            );
            }
            case "literal": {
              return <span>{value}</span>;
                }
              }
            })
          }
        </span></>
    )
  }
  {
    days &&
  (
      <><br /><span role="list">
          Dias:{" "}
          {
            y && m &&
              list.formatToParts(
                days.sort().map((d) => {
                  return new Intl.DateTimeFormat("pt-PT", {
                    day: "numeric",
                  })
                    .format(
                      new Date(
                        Date.UTC(
                          y,
                          m - 1,
                          d,
                          ...[
                            date === undefined
                              ? undefined
                              : date.getTimezoneOffset() / 60,
                            date === undefined
                              ? undefined
                              : date.getTimezoneOffset() % 60,
                          ].filter(defined),
                        ),
                      ),
                    );
                }),
              ).map(
                ({ type, value }: { type: string; value: string }) => {
                  switch (type) {
                    case "element": {
                      const day = days[dI++];
                      return (
              <span role="listitem"><a
                  class:list={[{ active: day === d }]}
                  href={`/blog/${y}/${pad(m)}/${pad(day)}`}
                >{value}</a></span>
            );
            }
            case "literal": {
              return <span>{value}</span>;
                  }
                }
              },
            )
          }
        </span></>
    )
  }
</nav>

<style>
  nav {
    padding-block: calc(var(--size-2) * 1em);
  }
  a.active {
    font-weight: bolder;
  }

  a:hover {
    color: var(--color-active);
  }
</style>