import { loadConfiguration } from "./configuration.js";
import { addEventToButton, addEventToInput, debounce, getElements } from "./dom-utils.js";
import { emitEvent, listenTo } from "./events.js";
import { initializePlanner } from "./planner.js";
import { initializeMenuResizing } from "./resize-menus.js";
import { getState, setState, STATE } from "./state.js";
import { initializeTooltips } from "./tooltip.js";
import { initializeMenuBar } from "./menu-bar.js";

window.addEventListener("load", () => {
  emitEvent("setup-start");

  getElements("state", "*").forEach(e => {
    e.classList.add("hidden");
    if (e.dataset.state === getState()) {
      e.classList.remove("hidden");
    }
  });

  addEventToInput("configuration", "input", loadConfiguration);
  addEventToButton("load-configuration", "click", loadConfiguration);
  addEventToInput("block-filter", "input", debounce(e => {
    emitEvent("block-picker:filter", e.target.value);
  }));

  listenTo("state", () => {
    console.log("State changed", getState());
    getElements("state", "*").forEach(e => {
      e.classList.add("hidden");
      if (e.dataset.state === getState()) {
        e.classList.remove("hidden");
      }
    });
  });

  listenTo("config:end", () => setState(STATE.planning));

  initializePlanner();
  initializeMenuResizing();
  initializeTooltips();
  initializeMenuBar();

  emitEvent("setup-end");

  void loadConfiguration("addons");
});