// Urgent telegrams: the game warns that a way of losing power is getting close.
// They slide in over the desk and time stays stopped until the player acknowledges.

import { t, tx } from "../i18n/i18n.js";
import { $, esc } from "./desk.js";

export function createTelegram(root, { alerts, onDismiss }) {
  root.addEventListener("click", (e) => {
    if (e.target.closest("button[data-dismiss]")) onDismiss();
  });

  let shown = "";

  function update(state) {
    const alert = state.pending.alert && !state.over ? state.alerts[0] : null;
    const key = alert ? `${alert.kind}:${alert.day}` : "";
    if (key === shown) return;
    shown = key;

    if (!alert) {
      root.hidden = true;
      root.innerHTML = "";
      return;
    }
    const text = alerts[alert.kind];
    root.innerHTML = `
      <article class="telegram" role="alertdialog" aria-labelledby="telegram-title">
        <header class="telegram__head">
          <span>${t("alert.urgent")}</span>
          <span>${state.alerts.length > 1 ? `+${state.alerts.length - 1}` : ""}</span>
        </header>
        <h3 id="telegram-title">${esc(tx(text.title))}</h3>
        <p>${esc(tx(text.body))}</p>
        <button class="brass brass--wide" data-dismiss>${t("alert.ack")}</button>
      </article>`;
    root.hidden = false;
    $(root, "button").focus();
  }

  return { update };
}