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

export class Elements extends Base {
  elements = new Map(); // id -> Element
  classes = [];
  div = undefined;

  constructor({ classes } = {}) {
    super();
    this.classes = classes;
    this.div = document.createElement("div");
    this.div.classList.add("elements");
    this.div.classList.add("droptarget");
    for (const className of (classes ?? [])) {
      this.div.classList.add(className);
    }
  }
  setMain(main) {
    super.setMain(main);
    this.main.div.appendChild(this.div);
  }

  add(props) {
    // Make sure we have a unique id
    let id = props.id;
    if (!id) {
      if (crypto?.randomUUID) {
        id = crypto.randomUUID();
      } else {
        id = 1;
        while (this.elements.has(id)) {
          id++;
        }
      }
    }
    // Create element
    const element = new Element(this, { ...props, id });
    element.setMain(this.main);
    // Append to div
    this.div.appendChild(element.el);
    // Add to collection
    this.elements.set(id, element);
    return element;
  }

  remove(id) {
    const element = this.elements.get(id);
    if (element) {
      this.div.removeChild(element.el);
      this.elements.delete(id);
    }
  }

  getElementFromDOM(target) {
    return Array.from(this.elements.values()).find(({ el }) => el === target);
  }

  renderAll() {
    for (const element of this.elements.values()) {
      element.render();
    }
  }
}