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

const levels = {
  'Initial Jump': [ [], setupLevel([], [8, 0]) ],
  'Monopole Mining': [ ['Initial Jump'], setupLevel([[3, 3]], [8,8]) ],
  'Parabolic': [ ['Initial Jump', 'Monopole Mining'], setupLevel([[-2, 4], [0,0], [2, 4]], [3,9]) ],
  'Sinusoidal': [ 
    ['Initial Jump', 'Monopole Mining'], 
    setupLevel([ 
      [-4, 4*Math.sin(0)], 
      [0.5*Math.PI - 4, 4*Math.sin(0.5*Math.PI)], 
      [1.0*Math.PI - 4, 4*Math.sin(1.0*Math.PI)], 
      [1.5*Math.PI - 4, 4*Math.sin(1.5*Math.PI)], 
    ], [2.0*Math.PI - 4, 4*Math.sin(2.0*Math.PI)]),
  ],
};

export function setupLevelSelectUi(root, sfx) {
  const levelList = document.createElement('ol');
  const levelPicker = name => {
    const [ dependencies, level ] = levels[name];
    const allDependenciesSatisfied = dependencies.map(x => levels[x][1].completed).reduce((acc, x) => acc && x, true);
    // if (allDependenciesSatisfied) {
    if (true) {
      const button = document.createElement('input');
      button.type = 'button';
      button.value = name;
      button.onmouseenter = () => {
        sfx.buttonEnterAudio.currentTime = 0;
        sfx.buttonEnterAudio.play();
      }
      button.onclick = () => {
        sfx.buttonClickAudio.currentTime = 0;
        sfx.buttonClickAudio.play();
        root.innerText = '';
        setupLevelUi(level, root, sfx);
      }
      const li = document.createElement('li');
      li.appendChild(button);
      if (level.completed) {
        li.appendChild(document.createTextNode('[complete]'));
      }
      levelList.appendChild(li);
    }
  }

  [...Object.keys(levels)].forEach(levelPicker);
  const header = document.createElement('h1');
  header.classList.add('center');
  header.innerText = 'AVAILABLE CONTRACTS';
  root.appendChild(header);
  const p = document.createElement('p');
  p.innerText = 'Please select a General Products AMH hyperspace navigation contract from the list below.';
  root.appendChild(p);
  root.appendChild(levelList);
}