---
import {
  getFlagEmojiFromLocale,
  getLanguageNameFromLocale,
} from "../utils/lang";
import type { BlogPosting } from "@lib/collection/types";
import { get } from "@utils/anonymous";

interface Props {
  id: string;
  lang: Intl.LocalesArgument;
  workTranslations: BlogPosting[];
  translationOfWork?: BlogPosting;
}

const { id, lang, workTranslations, translationOfWork } = Astro.props;

const entries = [
  { "@type": "BlogPosting", "@id": id, inLanguage: lang },
  ...workTranslations,
];
if (translationOfWork !== undefined) {
  entries.push(translationOfWork);
}
const translations = entries.sort((x, y) =>
  x.inLanguage.localeCompare(y.inLanguage, lang)
);

const list = new Intl.ListFormat(lang, {
  type: "unit",
  style: "narrow",
});
const parts = list.formatToParts(translations.map(get("inLanguage")));
let i = 0;
---

{/* TODO: <https://schema.org/translator> */}

{
  translations.length > 0 && (
    <aside>
      <nav class="mute small">
        <span>Traduções:{" "}</span>
        <span class="translations" role="list">
          {
            parts.map(
              (
                { type, value }: {
                  type: "element" | "literal";
                  value: string;
                },
              ) => {
                switch (type) {
                  case "element": {
                    const {
                      "@id": identifier,
                      headline,
                      inLanguage,
                    } = translations[i++];
                    const original = id === identifier;
                    const active =
                      lang.localeCompare(inLanguage, lang) === 0;
                    return (
              <span
                role="listitem"
                itemprop={active
                  ? undefined
                  : original
                  ? "translationOfWork"
                  : "workTranslation"}
                itemscope={!active}
                itemtype={active ? undefined : "http://schema.org/BlogPosting"}
                itemid={active ? undefined : identifier}
              >
                <a
                  href={identifier}
                  class:list={[{ active }]}
                  rel={active ? undefined : "alternate"}
                  hreflang={active ? undefined : inLanguage}
                  type="text/html"
                  title={headline}
                ><span class="emoji">{getFlagEmojiFromLocale(inLanguage)}</span>
                  {getLanguageNameFromLocale(inLanguage)} (<span
                    itemprop="inLanguage"
                  >{inLanguage}</span>)</a>
              </span>
            );
            }
            case "literal": {
              return <span>{value}</span>;
                  }
                }
              },
            )
          }
        </span>
      </nav>
    </aside>
  )
}

<style>
  nav {
    padding-block: calc(var(--size-2) * 1em);
  }

  a.active {
    font-weight: bolder;
  }

  a:hover {
    color: var(--color-active);
  }

  @media print {
    aside {
      display: none;
    }
  }
</style>