// retoor <retoor@molodetz.nl>
import { Component } from "./Component.js";

export class ContextMenu extends Component {
  static tag = "dp-context-menu";

  setup() {
    this.hidden = true;
    document.addEventListener("click", (event) => {
      if (!this.contains(event.target)) {
        this.close();
      }
    });
    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        this.close();
      }
    });
  }

  open(x, y, items) {
    this.replaceChildren();
    items.forEach((item) => {
      const button = document.createElement("button");
      button.type = "button";
      button.textContent = item.label;
      button.addEventListener("click", () => {
        this.close();
        item.action();
      });
      this.append(button);
    });
    this.style.left = `${Math.min(x, window.innerWidth - 220)}px`;
    this.style.top = `${y}px`;
    this.hidden = false;
  }

  close() {
    this.hidden = true;
  }
}