import { atlasMetadata, makeAtlasImage } from "./atlas.js";
import { DomList } from "./dom-list.js";
import { addEventToButton, addEventToInput, getElements } from "./dom-utils.js";
import { emitEvent, listenTo } from "./events.js";
import { loadConfiguration } from "./configuration.js";
import { getState, setState, STATE } from "./state.js";

let multiblockSize = [ 7, 7, 5 ]; // width (screen x), depth (screen y), height (xy grids)
let suppressHover = false;
let activeItem = -1;

function cellHoverEvent(e) {
  if (suppressHover) return;

  const cells = document.querySelectorAll("#planner-list [data-x]");
  cells.forEach(c => delete c.dataset.highlight);
  if (e.type === "mouseenter") {
    cells.forEach(c => {
      if (c.dataset.y === e.target.dataset.y && c.dataset.z === e.target.dataset.z) {
        c.dataset.highlight = "x";
      }
      if (c.dataset.x === e.target.dataset.x && c.dataset.z === e.target.dataset.z) {
        c.dataset.highlight = "y";
      }
      if (c.dataset.x === e.target.dataset.x && c.dataset.y === e.target.dataset.y) {
        c.dataset.highlight = "z";
      }
      if (c === e.target) {
        delete c.dataset.highlight;
      }
    });
  }
}

function listClickEvent(e) {
  const items = document.querySelectorAll("#block-list [data-index]");
  items.forEach(i => delete i.dataset.active);
  activeItem = Number(e.currentTarget.dataset.index);
  e.currentTarget.dataset.active = undefined;
}

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

  window.addEventListener("keypress", e => {
    console.log(e);
    if (e.key === "H") {
      suppressHover = !suppressHover;
    }
  });

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

  addEventToInput("configuration", "input", loadConfiguration);
  addEventToButton("loadConfiguration", "click", loadConfiguration)

  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));

  listenTo("config:end", () => {
    console.log(atlasMetadata);
    const grid = new DomList(document.querySelector("#block-list"));
    grid.clear();

    atlasMetadata.forEach((m, i) => {
      const item = grid.makeItem();
      item.dataset.index = i.toString(10);
      item.appendChild(makeAtlasImage(i));
      item.addEventListener("click", listClickEvent);
      grid.addItem(item);
    });
  });

  listenTo("config:end", () => {
    const list = new DomList(document.querySelector("#planner-list"));
    list.clear();

    for (let z = 0; z < multiblockSize[2]; z++) {
      const item = list.makeItem();
      item.style.setProperty("--width", multiblockSize[1]);
      const grid = new DomList(item);
      grid.clear();
      for (let y = 0; y < multiblockSize[1]; y++) {
        for (let x = 0; x < multiblockSize[0]; x++) {
          const cell = grid.makeItem();
          cell.dataset.x = x.toString(10);
          cell.dataset.y = y.toString(10);
          cell.dataset.z = z.toString(10);
          cell.appendChild(makeAtlasImage(-1));
          cell.addEventListener("mouseenter", cellHoverEvent);
          cell.addEventListener("mouseleave", cellHoverEvent);
          grid.addItem(cell);
        }
      }
      list.addItem(item);
    }
  });

  emitEvent("setup-end");

  void loadConfiguration("default");
});