function createElement(tagName, tagAttributes, ...tagContents) {
  const el = document.createElement(tagName);
  if (typeof tagAttributes === 'object' && tagAttributes != null) {
    for (let ta of Object.keys(tagAttributes)) {
      el.setAttribute(ta, tagAttributes[ta]);
    }
  }
  for (let tc of tagContents) {
    if (typeof tc === "string") {
      el.appendChild(document.createTextNode(tc))
      continue;
    } else if (typeof tc === 'object') {
      if (tc instanceof HTMLElement) {
        el.appendChild(tc)
        continue;
      }
    }
    el.appendChild(document.createTextNode(tc.toString()))
  }
  return el;
};

class GamesLauncher {
  constructor(divId) {
    this.createOptionsForm(divId);
  }

  createOptionsForm(divId) {
    this.divId = divId;
    this.divEl = document.getElementById(divId);
    if (this.divEl === null) throw new Error("elementId not found: " + divId);
    while (this.divEl.firstChild) {
      this.divEl.removeChild(this.divEl.lastChild);
    }

    this.currentGame = null;
    this.gameId = 'inner-' + divId;
    this.gameEl = createElement('div', { id: this.gameId, style: 'line-height: 2em;' });
    this.gameEl.appendChild(createElement('label', { for: 'games' }, 'Select a game: '));
    this.selectGameEl = createElement('select', { id: 'games', style: 'float: right;' });
    this.selectGameEl.appendChild(createElement('option', { value: 'pong-context2d' }, 'Pingpong (Context2D)'));
    this.selectGameEl.appendChild(createElement('option', { value: 'tetris-context2d' }, 'Tetris (Context2D)'));
    this.selectGameEl.onchange = () => this.onSelectGameChange();
    this.gameEl.appendChild(this.selectGameEl);
    this.gameEl.appendChild(createElement('br'));
    this.gameEl.appendChild(createElement('hr'));

    this.widthEl = createElement('input', { type: 'number', id: 'width', value: '480', style: 'float: right;' });
    this.heightEl = createElement('input', { type: 'number', id: 'height', value: '320', style: 'float: right;' });
    this.difficultyEl = createElement('input', { type: 'number', id: 'difficulty', value: '1', style: 'float: right;' });
    this.showFpsEl = createElement('input', { type: 'checkbox', id: 'showFps', style: 'float: right;' });

    this.gameEl.appendChild(createElement('label', { for: 'width' }, 'Width: '));
    this.gameEl.appendChild(this.widthEl);
    this.gameEl.appendChild(createElement('br'));
    this.gameEl.appendChild(createElement('label', { for: 'height' }, 'Height: '));
    this.gameEl.appendChild(this.heightEl);
    this.gameEl.appendChild(createElement('br'));
    this.gameEl.appendChild(createElement('label', { for: 'difficulty' }, 'difficulty: '));
    this.gameEl.appendChild(this.difficultyEl);
    this.gameEl.appendChild(createElement('br'));
    this.gameEl.appendChild(createElement('label', { for: 'showFps' }, 'showFps: '));
    this.gameEl.appendChild(this.showFpsEl);
    this.gameEl.appendChild(createElement('br'));
    this.gameEl.appendChild(createElement('hr'));
    const btnStart = createElement('button', { style: 'float: right;' }, 'Start game');
    btnStart.onclick = () => this.startGame();
    this.gameEl.appendChild(btnStart);
    this.divEl.appendChild(this.gameEl);
  }

  createCloseExitGameButton() {
    const btnStopGameEl = createElement('button', { style: 'float: right;' }, 'exit');
    btnStopGameEl.onclick = () => {
      if (typeof this.currentGame == 'object' && typeof this.currentGame.close == 'function') this.currentGame.close();
      this.createOptionsForm(this.divId);
    };
    this.divEl.appendChild(btnStopGameEl);
  }

  onSelectGameChange() {
    const selectedValue = this.selectGameEl.value;//this.selectGameEl.options[this.selectGameEl.selectedIndex].value;
    // const term = getTerminal('dropdown');
    // term.printVar(selectedValue);
    switch (selectedValue) {
      case 'pong-context2d':
        this.widthEl.value = 480;
        this.heightEl.value = 320;
        // this.difficultyEl.value = 1;
        break;
      case 'tetris-context2d':
        this.widthEl.value = 300;
        this.heightEl.value = 600;
        // this.difficultyEl.value = 1;
        break;
    }
  }

  startGame() {
    const selectedValue = this.selectGameEl.value;//this.selectGameEl.options[this.selectGameEl.selectedIndex].value;
    const width = this.widthEl.value;
    const height = this.heightEl.value;
    const difficulty = this.difficultyEl.value;
    const showFps = this.showFpsEl.checked;
    switch (selectedValue) {
      case 'pong-context2d':
        this.createCloseExitGameButton();
        this.currentGame = new PingPong_CTX2D(this.gameId, width, height, difficulty, showFps);
        this.currentGame.canvasEl.focus();
        break;
      case 'tetris-context2d':
        this.createCloseExitGameButton();
        this.currentGame = new Tetris_CTX2D(this.gameId, width, height, difficulty, showFps);
        this.currentGame.canvasEl.focus();
        break;
      default:
        alert("Select a game first?");
    }
  }
}