import { GUI } from 'GUI';

export class ThreeGUIElement extends HTMLElement{
  constructor() {
    super();
    this.GUI = new GUI();
    this.GUI.onChange(this.onGUIValueChange.bind(this));
  }

  onGUIValueChange(evt) {
    this.dispatchEvent(new CustomEvent('value-change', {
      detail: {
        property: evt.property,
        value: evt.value
      }
    }));
  }

  reset() {
    while(this.GUI.children.length > 0) {
      this.GUI.children[0].destroy();
    }
  }

  setElements(elements) {
    var self = this;
    this.elements = {};

    var gui = this.GUI;
    this.reset();
    elements.forEach(function(parameter) {
      console.log(parameter)
      self.elements[parameter.alias] = parameter.value;
      gui.add(self.elements, parameter.alias, parameter.value);
    });
  }
}

customElements.define('three-gui', ThreeGUIElement);