import { debounce } from "./dom-utils.js";
import { emitEvent, listenTo } from "./events.js";

const tooltips = {};
let tooltipsCounter = 0;
let lastTarget = null;
let suppressTooltips = false;

export function initializeTooltips() {
  window.addEventListener("mousemove", () => {
    if (lastTarget !== null) {
      emitEvent("tooltips:hide");
    }
    lastTarget = null;
  });
  window.addEventListener("mousemove", debounce(e => {
    lastTarget = e.target;
    emitEvent("tooltips:show");
  }, 500));

  listenTo("tooltips:show", showTooltip);
  listenTo("tooltips:hide", hideTooltip);

  document.addEventListener("keydown", e => {
    if (e.key === "T") {
      suppressTooltips = !suppressTooltips;
    }
  });
}

export function createTooltip(data) {
  const id = tooltipsCounter;
  tooltips[id] = data;
  tooltipsCounter++;
  return id;
}

export function getTooltip(id) {
  return tooltips[id];
}

export function deleteTooltip(id) {
  delete tooltips[id];
}

function showTooltip() {
  if (suppressTooltips) return;
  if (!lastTarget.dataset.tooltip) return;

  const dom = createTooltipDom(lastTarget.dataset.tooltip);
  if (!dom) return;

  lastTarget.appendChild(dom);
}
function hideTooltip() {
  if (suppressTooltips) return;
  if (!lastTarget.dataset.tooltip) return;

  console.log(lastTarget.querySelector(".tooltip"))
  lastTarget.removeChild(lastTarget.querySelector(".tooltip"));
}

function createTooltipDom(id) {
  const data = tooltips[id];
  if (!Array.isArray(data)) {
    console.warn("tooltip %s is not an array: %o", id, data);
    return null;
  }
  const div = document.createElement("div");
  div.classList.add("tooltip");
  for (const row of data) {
    const rowElem = document.createElement("div");

    if (typeof row === "string") {
      rowElem.innerText = row;
    } else {
      // TODO: support rich tooltips
      throw row;
    }

    div.appendChild(rowElem);
  }
  return div;
}