import { createState, selectState } from "./state.mjs";
import { createUiBindings } from "./ui-runtime.js";

function closeFilterMenu(document) {
  const menu = document.getElementById("status-menu");
  if (!menu) return;
  menu.open = false;
  menu.querySelector("summary").focus({ preventScroll: true });
}

function renderFilter(document, element, filter) {
  element.querySelectorAll("[data-task-kind]").forEach((row) => {
    row.classList.toggle(
      "is-muted",
      filter !== "all" && row.dataset.taskKind !== filter,
    );
  });
  const labels = {
    all: "All tasks",
    waiting: "Waiting on you",
    connections: "Connections",
  };
  document.getElementById("filter-current-label").textContent = labels[filter];
  const count = element.querySelectorAll(
    "[data-task-kind]:not(.is-muted)",
  ).length;
  document.getElementById("filter-result-count").textContent =
    `${count} tasks in focus`;
}

function bindSelections(document, ui) {
  let state = createState();
  const bind = (key, attribute, targetId) => {
    const element = document.getElementById(targetId);
    const buttons = [...document.querySelectorAll(`[${attribute}]`)];
    const render = () => {
      buttons.forEach((button) =>
        button.setAttribute(
          "aria-pressed",
          String(button.getAttribute(attribute) === state[key]),
        ),
      );
      if (!element) return;
      element.dataset[key] = state[key];
      if (key === "filter") renderFilter(document, element, state.filter);
    };
    render();
    buttons.forEach((button) =>
      ui.listen(button, "click", (event) => {
        const next = selectState(state, key, button.getAttribute(attribute));
        if (next[key] !== state[key]) {
          state = next;
          render();
          ui.animate(
            element,
            event,
            [
              { opacity: 0.82, transform: "translateY(2px)" },
              { opacity: 1, transform: "translateY(0)" },
            ],
            { duration: 160, easing: "ease-out" },
          );
        }
        if (key === "filter") closeFilterMenu(document);
      }),
    );
  };
  bind("filter", "data-filter-choice", "filter-demo");
  bind("context", "data-context-choice", "context-demo");
}

function bindNavigation(document, ui) {
  const toggle = document.querySelector("[data-menu-toggle]");
  const navigation = document.getElementById("site-nav");
  if (!toggle || !navigation) return;
  const setOpen = (open) => {
    toggle.setAttribute("aria-expanded", String(open));
    toggle.setAttribute(
      "aria-label",
      open ? "Close navigation" : "Open navigation",
    );
    navigation.classList.toggle("is-open", open);
  };
  setOpen(false);
  ui.listen(toggle, "click", () =>
    setOpen(toggle.getAttribute("aria-expanded") !== "true"),
  );
  ui.listen(navigation, "click", (event) => {
    if (event.target.closest("a")) setOpen(false);
  });
  ui.listen(document, "keydown", (event) => {
    if (
      event.key !== "Escape" ||
      toggle.getAttribute("aria-expanded") !== "true"
    )
      return;
    setOpen(false);
    toggle.focus();
  });
}

export function initializeInteractions(document, env = window) {
  const ui = createUiBindings(document, env);
  bindNavigation(document, ui);
  bindSelections(document, ui);
  ui.listen(document, "keydown", (event) => {
    if (event.key === "Escape" && document.getElementById("status-menu")?.open)
      closeFilterMenu(document);
  });
  return () => ui.dispose();
}