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

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

const y = date.getFullYear();
const m = date.getMonth() + 1;
const d = date.getDate();
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>
  <span role="list">
    Anos:{" "}
    {
      list.formatToParts(years.map((y) =>
        new Intl.DateTimeFormat("pt-PT", { year: "2-digit" }).format(
          new Date(
            Date.UTC(
              y,
              0,
              1,
              date.getTimezoneOffset() / 60,
              date.getTimezoneOffset() % 60,
            ),
          ),
        )
      )).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>
  <br />
  <span role="list">
    Meses:{" "}
    {
      list.formatToParts(months.map((m) =>
        new Intl.DateTimeFormat("pt-PT", { month: "short" }).format(
          new Date(
            Date.UTC(
              y,
              m - 1,
              1,
              date.getTimezoneOffset() / 60,
              date.getTimezoneOffset() % 60,
            ),
          ),
        )
      )).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:{" "}
          {
            list.formatToParts(days.map((d) => {
          return new Intl.DateTimeFormat("pt-PT", { day: "numeric" })
            .format(
              new Date(
                Date.UTC(
                  y,
                  m - 1,
                  d,
                  date.getTimezoneOffset() / 60,
                  date.getTimezoneOffset() % 60,
                ),
              ),
            );
        })).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(d)}`}
                >{value}</a></span>
            );
            }
            case "literal": {
              return (
              <span>{value}</span>
            );
            }
          }
        })
          }
        </span></>
    )
  }
</nav>

<style>
  a.active {
    font-weight: bolder;
  }
</style>