import { setupLevelSelectUi } from './levelSelect.js';
import { setupLevel, setupLevelUi } from './level.js';

window.onload = () => {

  const root = document.getElementById('root');

  const start = document.createElement('input');
  start.type = 'button';
  start.value = 'Start';
  start.onclick = () => {
    const audio = new AudioContext();
    root.removeChild(start);

    const musicGain = audio.createGain();
    const addMusic = (music, id) => {
      const element = document.getElementById(id);
      const source = audio.createMediaElementSource(element);
      source.connect(musicGain).connect(audio.destination);
      return [ ...music, { element, source } ];
    }
    musicGain.gain.value = 0.5;
    const musicList = [
      'music-minute', 
      'music-starboard',
      'music-cribwhistling',
      'music-swish',
      'music-aeroplane',
    ].reduce(addMusic, []);
    musicList.forEach(
      ({ element }, i) => element.addEventListener(
        'ended', 
        () => musicList[(i+1) % musicList.length].element.play(),
      )
    )
    musicList[0].element.play();

    // const level = setupLevel([[2, 2], [3,3]], [7, 7]);
    // const ui = setupLevelUi(level, root, audio);
    setupLevelSelectUi(root, audio);
  };
  root.appendChild(start);
}