// Mode Switcher
import { Tool } from '../tool.js';
import {
  MODE_MASS_GENERATION,
  MODE_PAN_VIEW,
} from '../config.js';

export class ModeSwitch extends Tool {
  currentMode = undefined;
  modes = [
    [MODE_MASS_GENERATION, 'Generate Mass'],
    [MODE_PAN_VIEW, 'Pan View'],
  ];
  buttons = [];

  constructor(toolbar) {
    super(toolbar);

    const [[currentModeID, _]] = this.modes;
    this.currentMode = currentModeID;

    const modesDiv = document.createElement('div');
    const titleDiv = document.createElement('div');

    this.div.appendChild(titleDiv);
    this.div.appendChild(modesDiv);

    titleDiv.innerHTML = `<h2>Modes</h2>`;

    // Since we have a heading, we need to reduce top padding
    this.div.style.paddingTop = '0px';

    modesDiv.style.display = 'flex';
    modesDiv.style.flexDirection = 'column';

    for (let [modeID, modeTitle] of this.modes) {
      const button = document.createElement('button');
      this.buttons.push(button);
      button.modeID = modeID;
      modesDiv.appendChild(button);
      button.innerHTML = `<h3>${modeTitle}</h3>`;
      button.classList.add('wide');

      button.addEventListener('click', (e) => {
        if (this.currentMode !== modeID) {
          this.currentMode = modeID;
          this.setModesOpacity();
        }
      });
    }
    this.setModesOpacity();

    // Add global method to get current mode / check mode
    this.sim.getCurrentMode = () => this.currentMode;
    this.sim.isCurrentMode = (modeID) => modeID === this.currentMode;
  }

  setModesOpacity() {
    for (let button of this.buttons) {
      button.style.opacity = button.modeID === this.currentMode ? '50%' : '100%';
    }
  }
  
  // TODO: on enter / on leave mode / some sort of callbacks on mode transitions

}