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

window.onload = () => setTimeout(() => {
  
  const root = document.getElementById('root');
  root.classList.add('center');

  const title = document.createElement('h1');
  title.innerText = 'GENERAL PRODUCTS';
  root.appendChild(title);

  const logo = document.createElement('h1');
  logo.classList.add('logo');
  logo.innerText = '※';
  root.appendChild(logo);

  const title2 = document.createElement('h2');
  title2.innerText = 'AUTOMATED MONOPOLE HARVESTER (AMH) HYPERSPACE NAVIGATIONAL SERVICES';
  root.appendChild(title2);

  const paragraph = document.createElement('p');
  paragraph.innerText = 'greetings, navigator! thank you for helping us to program the hyperspace engines of our automated monopole harvester (AMH) platforms. by doing so, you help ensure stable antimatter production throughout the eight worlds.';
  root.appendChild(paragraph);

  const start = document.createElement('input');
  start.type = 'button';
  start.value = 'connect to AMH';
  start.onclick = () => {
    root.classList.remove('center');
    root.innerText = '';
    const audio = new AudioContext();

    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-aeroplane',
      'music-minute', 
      'music-starboard',
      'music-swish',
      'music-cribwhistling',
    ].reduce(addMusic, []);
    musicList.forEach(
      ({ element }, i) => element.addEventListener(
        'ended', 
        () => musicList[(i+1) % musicList.length].element.play(),
      )
    )
    musicList[0].element.play();

    const sfx = {};
    sfx.buttonEnterAudio = document.getElementById('sfx-buttonenter');
    sfx.buttonClickAudio = document.getElementById('sfx-buttonclick');
    sfx.listAppearAudio = document.getElementById('sfx-listappear');
    audio.createMediaElementSource(sfx.buttonEnterAudio).connect(audio.destination);
    audio.createMediaElementSource(sfx.buttonClickAudio).connect(audio.destination);
    audio.createMediaElementSource(sfx.listAppearAudio).connect(audio.destination);

    sfx.resourceAudio = document.getElementById('sfx-resource');
    audio.createMediaElementSource(sfx.resourceAudio).connect(audio.destination);
  
    sfx.doneAudio = document.getElementById('sfx-done');
    audio.createMediaElementSource(sfx.doneAudio).connect(audio.destination);
  
    sfx.wrongAudio = document.getElementById('sfx-wrong');
    audio.createMediaElementSource(sfx.wrongAudio).connect(audio.destination);

    // const level = setupLevel([[2, 2], [3,3]], [7, 7]);
    // const ui = setupLevelUi(level, root, audio);

    Promise.all([...Object.values(sfx)].map(x => new Promise(resolve => {
      x.load();
      x.addEventListener('canplaythrough', resolve, false);
    }))).then(
      () => setupLevelSelectUi(root, sfx)
    );
  };
  root.appendChild(start);
}, 200);