export class Element {
  elements = undefined;
  id = undefined;
  summary = () => "";
  detail = () => "";
  el = undefined;
  classes = [];

  setMain(main) {
    this.main = main;
  }

  constructor(elements, { id, summary, detail, classes, width, height, x, y }) {
    this.elements = elements;
    this.id = id;
    this.summary = summary;
    this.detail = detail;

    // Create DOM element(s)
    this.el = document.createElement("div");
    this.el.id = id;
    this.el.classList.add('element');
    for (const className of (classes ?? [])) {
      this.el.classList.add(className);
    }
    if (width !== undefined && height !== undefined) {
      this.setSize(width, height);
    }
    if (x !== undefined && y !== undefined) {
      this.setPosition({ x, y });
    }
    if (summary) {
      this.summaryEl = document.createElement("div");
      this.summaryEl.classList.add("summary");
      this.el.appendChild(this.summaryEl)
    }
    if (detail) {
      this.detailEl = document.createElement("div");
      this.detailEl.classList.add("detail");
      this.el.appendChild(this.detailEl)
    }

    // Handle pointer down to initiate drag
    this.el.addEventListener("pointerdown", (e) => {
      e.preventDefault();
      const { clientX: x, clientY: y } = e;
      this.main.pointer.startDrag({ element: this, x, y });
    });
  }

  setPosition({ x, y }) {
    this.el.style.position = "absolute";
    this.el.style.top = `${y}px`;
    this.el.style.left = `${x}px`;
    return this;
  }

  setSize(width, height) {
    this.el.style.width = `${width}px`;
    this.el.style.height = `${height}px`;
    return this;
  }

  render() {
    if (this.summary) {
      this.summaryEl.innerHTML = this.summary();
    }
    if (this.detail) {
      this.detailEl.innerHTML = this.detail();
    }
  }
}