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

const internals = {
  symbols: {
    x: '𝜃',
    y: '𝜓',
    z: '𝜙'
  }
};

/**
  * UI that adjusts the parameters of the camera
  */
export default class CameraAdjuster extends System {

  constructor(container) {

    super();
    this.container = container;
  }

  added(engine){

    this.nodes = engine.getNodes(Cameras);
    this.adjusterContainer = settingsContainer({
      id: 'camera-adjuster',
      label: 'Camera'
    })

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

      nodeElement.appendChild(slider({
        id: `camera-adjuster-${i}-slider-radius`,
        min: '2',
        max: '10',
        step: '0.1',
        label: '𝑟',
        className: 'radius',
        get: () => node.radius.radius.toString(),
        set: (value) => (node.radius.radius = parseFloat(value))
      }));

      ['x', 'y', 'z'].forEach(key => {
        nodeElement.appendChild(slider({
          id: `camera-adjuster-${i}-slider-${key}`,
          min: '0',
          max: '0.5',
          step: '0.001',
          label: internals.symbols[key],
          className: `rotation-${key}`,
          get: () => node.velocity[key].toString(),
          set: (value) => (node.velocity[key] = 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(){}
};