const form = document.getElementById("add");
const input = document.getElementById("word");
const list = document.getElementById("list");
const toggle = document.getElementById("toggle");

const load = () => browser.storage.sync.get({ words: [] }).then(r => r.words);
const save = words => browser.storage.sync.set({ words });
const loadEnabled = () => browser.storage.sync.get({ enabled: true }).then(r => r.enabled);

function render(words) {
  list.replaceChildren(
    ...words.map(w => {
      const li = document.createElement("li");
      const label = document.createElement("span");
      label.textContent = w;
      const del = document.createElement("button");
      del.type = "button";
      del.textContent = "×";
      del.title = "Remove";
      del.addEventListener("click", () => remove(w));
      li.append(label, del);
      return li;
    })
  );
}

async function remove(word) {
  const words = (await load()).filter(w => w !== word);
  await save(words);
  render(words);
}

form.addEventListener("submit", async e => {
  e.preventDefault();
  const word = input.value.trim();
  input.value = "";
  input.focus();
  if (!word) return;
  const words = await load();
  if (words.some(w => w.toLowerCase() === word.toLowerCase())) return;
  words.push(word);
  await save(words);
  render(words);
});

function paint(enabled) {
  toggle.textContent = enabled ? "❚❚" : "▶";
  toggle.title = enabled ? "Pause" : "Resume";
  toggle.classList.toggle("off", !enabled);
}

toggle.addEventListener("click", async () => {
  const enabled = !(await loadEnabled());
  await browser.storage.sync.set({ enabled });
  paint(enabled);
});

load().then(render);
loadEnabled().then(paint);