import { Base } from "./base.js";

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

  constructor(elements, {
    id, // ""
    summary, // () => "div innerHTML"
    detail, // () => "div innerHTML"
    classes, // [""]
    size, // { x, y }
    position, // { x, y }
  }) {
    super();
    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 (size) {
      this.setSize(size);
    }
    if (position) {
      this.setPosition(position);
    }
    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({ x, y }) {
    this.el.style.width = `${x}px`;
    this.el.style.height = `${y}px`;
    return this;
  }

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