import {DRAGGABLE_ELEMENT_CLASSNAME} from './config.js';

export class Overlay {
  sim = undefined;
  constructor(sim) {
    this.sim = sim;

    // Add info text box
    const infoBox = document.createElement('div');
    this.sim.div.appendChild(infoBox);
    this.infoBox = infoBox;
    infoBox.style.position = 'relative';
    infoBox.style.display = 'inline-block';
    infoBox.style.top = 0;
    infoBox.style.left = 0;
    infoBox.width = 'fit-content';
    infoBox.style.zIndex = 1;
    infoBox.classList.add(DRAGGABLE_ELEMENT_CLASSNAME);
  }

  renderInfo() {
    this.infoBox.innerHTML = '';
    const table = document.createElement('table');
    for (let [k, v] of Object.entries(this.sim.info)) {
      let row = document.createElement('tr');
      let keyCell = document.createElement('td');
      keyCell.innerHTML = `${k}: `;
      row.appendChild(keyCell);
      let vs = Array.isArray(v) ? v : [v];
      for (let x of vs) {
        let valueCell = document.createElement('td');
        valueCell.innerHTML = x;
        row.appendChild(valueCell);
      }
      table.appendChild(row);
    }
    this.infoBox.appendChild(table);
  }

  // Update positions of draggable items
  updateDraggable() {
    const elements = document.querySelectorAll(`.${DRAGGABLE_ELEMENT_CLASSNAME}`);
    for (let el of elements) {
      if (!el.dragging) continue; 
      const {
        elementStart: {x: x0, y: y0},
        pointerStart: {x: x1, y: y1}, 
        pointerEnd: {x: x2, y: y2}
      } = el.dragging;
      const dx = x2 - x1;
      const dy = y2 - y1;
      const left = x0 + dx;
      const top = y0 + dy;
      el.style.left = `${left}px`;
      el.style.top = `${top}px`;
    }
  }
}