(function () {
  "use strict";

  const status = document.getElementById("status");
  const toggle = document.getElementById("toggle");
  const fontStyleInputs = [...document.querySelectorAll('input[name="font-style"]')];
  let activeTabId = null;
  let currentEnabled = false;
  let currentFontStyle = "round";
  let busy = false;
  let fontStyleBusy = false;

  function render(enabled) {
    currentEnabled = enabled;
    toggle.disabled = busy || activeTabId === null;
    toggle.setAttribute("aria-pressed", String(enabled));
    toggle.textContent = enabled ? "Restore Cyrillic" : "Enable Glagolitic";
    status.textContent = enabled ? "Glagolitic is on for this tab." : "Cyrillic is unchanged in this tab.";
  }

  function setFontStyleDisabled(disabled) {
    for (const input of fontStyleInputs) {
      input.disabled = disabled;
    }
  }

  function renderFontStyle(style) {
    currentFontStyle = style === "angular" ? "angular" : "round";
    for (const input of fontStyleInputs) {
      input.checked = input.value === currentFontStyle;
    }
    setFontStyleDisabled(false);
  }

  function showUnavailable() {
    activeTabId = null;
    currentEnabled = false;
    toggle.disabled = true;
    toggle.setAttribute("aria-pressed", "false");
    toggle.textContent = "Unavailable on this page";
    status.textContent = "Firefox protects this page from extensions.";
  }

  async function askBackground(type, extra = {}) {
    return browser.runtime.sendMessage({ type, ...extra });
  }

  toggle.addEventListener("click", async () => {
    if (busy || activeTabId === null) {
      return;
    }

    const targetEnabled = !currentEnabled;
    busy = true;
    toggle.disabled = true;
    status.textContent = "Updating tab…";
    try {
      const response = await askBackground("glagolify:set-tab-enabled", {
        tabId: activeTabId,
        enabled: targetEnabled
      });
      if (!response || !response.available) {
        showUnavailable();
        return;
      }
      render(response.enabled === true);
      renderFontStyle(response.fontStyle);
    } catch (error) {
      showUnavailable();
    } finally {
      busy = false;
      if (activeTabId !== null) {
        toggle.disabled = false;
      }
    }
  });

  for (const input of fontStyleInputs) {
    input.addEventListener("change", async () => {
      if (!input.checked || fontStyleBusy || input.value === currentFontStyle) {
        return;
      }

      const previousFontStyle = currentFontStyle;
      fontStyleBusy = true;
      setFontStyleDisabled(true);
      try {
        const response = await askBackground("glagolify:set-font-style", {
          fontStyle: input.value
        });
        if (!response || !response.accepted) {
          throw new Error("Font style was rejected");
        }
        renderFontStyle(response.fontStyle);
      } catch (error) {
        renderFontStyle(previousFontStyle);
      } finally {
        fontStyleBusy = false;
        setFontStyleDisabled(false);
      }
    });
  }

  async function initialize() {
    try {
      const tabs = await browser.tabs.query({ active: true, currentWindow: true });
      if (!tabs[0] || typeof tabs[0].id !== "number") {
        showUnavailable();
        return;
      }

      activeTabId = tabs[0].id;
      const response = await askBackground("glagolify:get-tab-state", {
        tabId: activeTabId
      });
      renderFontStyle(response && response.fontStyle);
      if (!response || !response.available) {
        showUnavailable();
        return;
      }
      render(response.enabled === true);
    } catch (error) {
      showUnavailable();
    }
  }

  initialize();
})();