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 = () => {
    // set up fullscreen
    document.documentElement.requestFullscreen();
    document.getElementById('fullscreen-toggle').onclick = () => {
      if (document.fullscreenElement === null) {
        document.documentElement.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    }

    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 = {};
    const sfxGain = audio.createGain();
    sfx.buttonEnterAudio = document.getElementById('sfx-buttonenter');
    sfx.buttonClickAudio = document.getElementById('sfx-buttonclick');
    sfx.listAppearAudio = document.getElementById('sfx-listappear');
    audio.createMediaElementSource(sfx.buttonEnterAudio).connect(sfxGain).connect(audio.destination);
    audio.createMediaElementSource(sfx.buttonClickAudio).connect(sfxGain).connect(audio.destination);
    audio.createMediaElementSource(sfx.listAppearAudio).connect(sfxGain).connect(audio.destination);

    sfx.resourceAudio = document.getElementById('sfx-resource');
    audio.createMediaElementSource(sfx.resourceAudio).connect(sfxGain).connect(audio.destination);
  
    sfx.doneAudio = document.getElementById('sfx-done');
    audio.createMediaElementSource(sfx.doneAudio).connect(sfxGain).connect(audio.destination);
  
    sfx.wrongAudio = document.getElementById('sfx-wrong');
    audio.createMediaElementSource(sfx.wrongAudio).connect(sfxGain).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(() => {
      sfx.gain = sfxGain;
      document.getElementById('sound-controls').onclick = () => showSoundControls(root, sfx, musicGain);
      setupLevelSelectUi(root, sfx)
    });
  };
  root.appendChild(start);
}, 200);


function showSoundControls(root, sfx, musicGain) {
  const div = document.createElement('div');
  div.classList.add('center-screen-container');
  const div2 = document.createElement('div');
  div2.classList.add('center-screen');
  div.appendChild(div2);
  const p = document.createElement('p');
  p.classList.add('alert-box');
  p.innerText = 'sound settings';
  div2.appendChild(p);
  root.appendChild(div);

  const musicLabel = document.createElement('label');
  musicLabel.innerText = 'music:';
  const musicRange = document.createElement('input');
  musicRange.type = 'range';
  musicRange.min = 0;
  musicRange.max = 1;
  musicRange.step = 0.1;
  musicRange.value = 2*musicGain.gain.value;
  musicRange.onchange = e => {
    musicGain.gain.value = 0.5*e.target.value;
  }
  p.appendChild(document.createElement('br'));
  p.appendChild(musicLabel);
  p.appendChild(musicRange);

  const sfxLabel = document.createElement('label');
  sfxLabel.innerText = 'sfx:';
  const sfxRange = document.createElement('input');
  sfxRange.type = 'range';
  sfxRange.min = 0;
  sfxRange.max = 1;
  sfxRange.step = 0.1;
  sfxRange.value = sfx.gain.gain.value;
  sfxRange.onchange = e => {
    sfx.gain.gain.value = e.target.value;
  }
  p.appendChild(document.createElement('br'));
  p.appendChild(sfxLabel);
  p.appendChild(sfxRange);


  const button = document.createElement('input');
  button.type = 'button';
  button.value = 'OK';
  button.onmouseenter = () => {
    sfx.buttonEnterAudio.currentTime = 0;
    sfx.buttonEnterAudio.play();
  }
  button.onclick = () => {
    sfx.buttonClickAudio.currentTime = 0;
    sfx.buttonClickAudio.play();
    root.removeChild(div);
  }
  p.appendChild(document.createElement('br'));
  p.appendChild(button);
}