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

const internals = {
  symbols: {
    a: '𝛿',
    b: '𝜀',
    c: '𝜂'
  }
};

/**
  * UI that adjusts the phase of any compatible object
  */
export default class PhaseAdjuster extends System {

  constructor(container) {

    super();
    this.container = container;
  }

  added(engine){

    this.nodes = engine.getNodes(Phased);
    this.adjusterContainer = settingsContainer({
      id: 'phase-adjuster',
      label: 'Phase'
    })

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

      ['a', 'b', 'c'].forEach(key => {
        nodeElement.appendChild(slider({
          id: `phase-adjuster-${i}-slider-${key}`,
          min: '0',
          max: Math.PI.toString(),
          step: '0.01',
          shiftStep: (Math.PI / 8).toString(),
          label: internals.symbols[key],
          className: `phase`,
          get: () => node.phase[key].toString(),
          set: (value) => (node.phase[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(){}
};