// Mode Switcher
import { Tool } from '../tool.js';
import {
  MODE_MASS_GENERATION,
  MODE_PAN_VIEW,
  EVENT_MODE_LEAVE,
  EVENT_MODE_ENTER,
} 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 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) => this.setMode(modeID));
    }

    // First listed mode is the default
    const [[currentModeID, _]] = this.modes;
    this.setMode(currentModeID);

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

  setModesOpacity() {
    for (let button of this.buttons) {
      button.style.opacity = button.modeID === this.currentMode ? '50%' : '100%';
    }
  }

  setMode(modeID) {
    if (modeID === this.currentMode) return;
    const leave = new CustomEvent(EVENT_MODE_LEAVE, {detail: {modeID: this.currentMode}});
    const enter = new CustomEvent(EVENT_MODE_LEAVE, {detail: {modeID}});
    this.currentMode = modeID;
    this.setModesOpacity();
    this.div.dispatchEvent(leave);
    this.div.dispatchEvent(enter);
  }
  
  // cb: () => {}
  onModeLeave(modeID, cb) {
    this.div.addEventListener(EVENT_MODE_LEAVE, (e) => {
      if (e.detail?.modeID === modeID) {
        cb();
      }
    });
  }

  // cb: () => {}
  onModeEnter(modeID, cb) {
    this.div.addEventListener(EVENT_MODE_ENTER, (e) => {
      if (e.detail?.modeID === modeID) {
        cb();
      }
    });
  }

}