import { System } from '@serpentity/serpentity';
import Frequent from '../nodes/configurable';
import { settingsContainer, slider } from '../factories/ui';

/**
  * UI that adjusts global configuration settings for the scene.
  */
export default class GlobalAdjuster extends System {

  constructor(container) {

    super();
    this.container = container;
  }

  added(engine){

    this.nodes = engine.getNodes(Frequent);
    const container = document.getElementById('settings');
    this.adjusterContainer = settingsContainer({
      id: 'global-adjuster',
      label: 'Global'
    });

    let i = 0;
    for (const node of this.nodes) {
      const nodeElement = settingsContainer({
        id: `global-adjuster-${i}`,
        label: 'Line',
        level: 3
      });

      nodeElement.appendChild(slider({
        id: `global-adjuster-${i}-slider`,
        min: '5',
        max: '1000',
        step: '5',
        label: '𝜆',
        className: 'lineLength',
        get: () => node.configuration.lineLength.toString(),
        set: (value) => (node.configuration.lineLength = parseFloat(value))
      }));

      this.adjusterContainer.appendChild(nodeElement);
      ++i;
    }

    this.container.appendChild(this.adjusterContainer);
  }

  removed(){

    this.container.removeChild(this.adjusterContainer);
    delete this.adjusterContainer;
    delete this.nodes;
  }

  update(){}
};