---
import type { CollectionEntry } from "astro:content";
import {
  getFlagEmojiFromLocale,
  getLanguageNameFromLocale,
} from "../utils/lang";
import { getEntries } from "astro:content";

interface Props {
  lang: string;
  translations?: CollectionEntry<"blog">["data"]["translations"];
}

const { lang } = Astro.props;

const translations = await getEntries(Astro.props.translations ?? []).then(
  (translations) =>
    translations.sort((x, y) => x.data.lang.localeCompare(y.data.lang)),
);
---

{
  /* TODO: What about <https://schema.org/translationOfWork> and <https://schema.org/translator>? */
}

{
  translations.length > 0 && (
    <aside>
      <nav>
        <p>Traduções:</p>
        <ul class="translations">
          {
            translations.map(async (
          { data, collection, id },
        ) => {
          const active = lang.localeCompare(data.lang) === 0;
          return (
              <li
                itemprop={active ? undefined : "workTranslation"}
                itemscope={!active}
                itemtype={active ? undefined : "http://schema.org/BlogPosting"}
                itemid={active
                ? undefined
                : new URL(`${collection}/read/${id}`, Astro.site).href}
              >
                <a
                  href={`/${collection}/read/${id}`}
                  class:list={[{ active }]}
                  rel={active ? undefined : "alternate"}
                  hreflang={active ? undefined : data.lang}
                  type="text/html"
                  title={data.title}
                ><span class="emoji">{getFlagEmojiFromLocale(data.lang)}</span>
                  {getLanguageNameFromLocale(data.lang)} (<span
                    itemprop="inLanguage"
                  >{data.lang}</span>)</a>
              </li>
            );
        })
          }
        </ul>
      </nav>
    </aside>
  )
}

<style>
  .translations {
    list-style-type: none;
    padding-inline-start: 0;
  }

  .translations > li {
    display: inline;
  }

  .translations > li > a > .emoji {
    text-decoration: none;
    font-family: var(--ff-icons);
  }

  .translations > li > a.active {
    font-weight: bolder;
    text-decoration: underline;
    color: var(--color-active);
  }

  nav:has(.translations) {
    display: flex;
    gap: 1rem;
  }

  nav:has(.translations) > * {
    font-size: smaller;
  }

  .translations > li:not(:first-child)::before {
    content: "|";
    margin-inline: 0.5em;
  }

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