const scene = {
  'scena 1': () => {
  },
  'scena 2': () => {
  },
  'scena 3': () => {
  }
}

const parametri = [
  {
    napis: 'kalibriraj',
    tip: 'button',
    sprememba: ev => {
      console.log('kalibriram')
      sendAll('/ww/calibrate')
    }
  },
  {
    napis: 'fraktaliziraj',
    tip: 'toggle',
    sprememba: ev => {
      sendAll('/ww/fraktaliziraj', [{
        type: 'i',
        value: ev.currentTarget.checked ? 1 : 0
      }])
    }
  },
  {
    napis: 'fraktaliziraj',
    tip: 'slider',
    min: 100,
    max: 2500,
    step: 1,
    value: 1200,
    sprememba: ev => {
      sendAll('/ww/fraktal-interval', [{
        type: 'i',
        value: ev.currentTarget.value
      }])
    }
  },
  {
    napis: 'napihuj',
    tip: 'toggle',
    sprememba: ev => {
      sendAll('/ww/napihuj', [{
        type: 'i',
        value: ev.currentTarget.checked ? 1 : 0
      }])
    }
  },
  {
    napis: 'zogice',
    tip: 'toggle',
    sprememba: ev => {
      sendAll('/ww/zogice', [{
        type: 'i',
        value: ev.currentTarget.checked ? 1 : 0
      }])
    }
  },
  {
    napis: 'duhovi',
    tip: 'toggle',
    sprememba: ev => {
      sendAll('/ww/kegli', [{
        type: 'i',
        value: ev.currentTarget.checked ? 1 : 0
      }])
    }
  },
  {
    napis: 'osvezi',
    tip: 'button',
    sprememba: ev => {
      sendAll('/ww/reload')
      window.location.reload()
    }
  },
  {
    napis: 'zoom',
    tip: 'slider',
    min: 3,
    max: 300,
    value: 40,
    step: 'any',
    sprememba: ev => {
      console.log('zoom!', ev.currentTarget.value)
      sendAll('/ww/zoom', [{
        type: 'f',
        value: ev.currentTarget.value
      }])
    }
  },
  {
    napis: 'deformiraj (po zvoku)',
    tip: 'slider',
    min: 0,
    max: 10,
    value: 0,
    step: 'any',
    sprememba: ev => {
      sendAll('/ww/deformiraj', [{
        type: 'f',
        value: ev.currentTarget.value
      }])
    }
  },
]

const Qs = s => document.querySelector(s)
const Qsa = s => document.querySelectorAll(s)
const Ce = e => document.createElement(e)

function ustvariElement(p) {
  const vrstica = Ce('tr')

  // Napis
  const napis = Ce('td')
  napis.innerHTML = p.napis
  vrstica.appendChild(napis)

  // Krmilnik
  let krmilnik
  switch (p.tip) {

  case 'button':
    krmilnik = Ce('button')
    krmilnik.innerHTML = ' '
    krmilnik.onclick = p.sprememba
    break

  case 'toggle':
    krmilnik = Ce('input')
    krmilnik.setAttribute('type', 'checkbox')
    krmilnik.onchange = p.sprememba
    break

  case 'slider':
    krmilnik = Ce('input')
    krmilnik.setAttribute('type', 'range')
    krmilnik.setAttribute('min', p.min)
    krmilnik.setAttribute('max', p.max)
    krmilnik.setAttribute('step', p.step)
    krmilnik.setAttribute('value', p.value)
    krmilnik.oninput = p.sprememba
    break
  }

  const krmilnikCelica = Ce('td')
  krmilnikCelica.className = "krmilnik"
  krmilnikCelica.appendChild(krmilnik)
  vrstica.appendChild(krmilnikCelica)

  return vrstica
}

window.addEventListener('DOMContentLoaded', () => {
  // Dodaj scene
  const sceneTD = Qs('#scene')
  Object.keys(scene).forEach(ime => {
    const b = Ce('button')
    b.innerHTML = ime
    b.onclick = () => {
      console.log('izbiram ', ime)
      scene[ime]()
    }
    sceneTD.append(b)
  })

  // Dodaj gumbe
  const gumbiT = Qs('#ctl')
  parametri.forEach(p => {
    const el = ustvariElement(p)
    gumbiT.appendChild(el)
  })
})