function mainView(state, emit) {
  if (state.fullscreen) {
    return html`
      <div id="app">
        ${Fullscreen(state, emit)}
      </div>
    `
  }

  return html`
    <div id="app">
      <div id="col-1" onmousedown=${e => {
      if (!(e.target.id === 'display-image')
        && !(e.target.id === 'display')) {
        emit('deselect-display')
      }
    }}>
        ${Display(state, emit)}
        ${Toolbar(state, emit)}
        ${Keys(state, emit)}
      </div>
      <div id="col-2">
        ${PhotoBooth(state, emit)}
        ${SoundRecorder(state, emit)}
      </div>
      ${state.waiting ? Waiting(state, emit) : null}
      ${state.clickHere ? ClickHere(state, emit) : null}
      ${state.isTutorialOpen ? Tutorial(state, emit) : null}
    </div>
  `
}

function dataToDisplay(state, emit) {
  if (state.displayData === '') {
    imgData = state.images['display']
  } else {
    imgData = state.displayData
  }
  return imgData
}


function Display(state, emit) {
  let selected = state.selectedKey === 'display' ? 'selected' : ''
  let imgData = dataToDisplay(state, emit)
 
  let style = `background-image: url('${imgData}')`
  //display onmousedown should not be triggered when clicking on the fullscreen button
  return html`
    <div id="display">
      <div id="display-image" 
        style="${style}"
        class="${selected}" onmousedown=${(e) => {
      if (e.target.id === 'display-image'
        || e.target.id === 'display') {
        emit('select-display')
      }
    }
    }>
        <button id="fullscreen-button" class="primary" onmousedown=${() => emit('toggle-fullscreen')}>
          <img src="icons/fullscreen.png" alt="fullscreen">
        </button>
      </div>
      <div id="logo">
        <img src="images/logo.png" alt="Makey Makey Interactive Poster"/>
      </div>
    </div>
  `
}

function Toolbar(state, emit) {
  let exportDisabledClass = ''
  if (isAllFalse(state.images) && isAllFalse(state.sounds)) {
    exportDisabledClass = 'disabled'
  }
  let uploadDisabledClass = !state.selectedKey && !state.isDisplaySelected ? 'disabled' : ''
  return html`
    <div id="toolbar">
      <button class="option" onmousedown=${() => emit('start-tutorial')}>
        <img src="icons/tutorial.png" alt="Start Tutorial">
      </button>
      <button id="import-zip" class="option" onmousedown=${() => emit('import-zip')}>
        <img src="icons/new_folder.png" alt="Import">
      </button>
      <button id="export-zip" class="option ${exportDisabledClass}" onmousedown=${() => emit('export-zip')}>
        <img src="icons/download.png" alt="Export">
      </button>
    </div>
  `
}

function Keys(state, emit) {

  let buttons = KEYS.filter(k => k !== 'display').map((key) => {
    let imageName = key === ' ' ? 'space' : key
    let image = html`<img src="icons/${imageName}.png" alt="${key}" />`
    let classList = []

    if (state.selectedKey === key) {
      classList.push('primary')
    } else if (state.sounds[key] === null && state.images[key] === null) {
      classList.push('empty')
    }

    classList = classList.join(' ')

    return html`
      <button class="${classList}" onmousedown=${() => emit('select-key', key)}>
        ${image}
      </button>
    `
  })
  return html`
    <div id="keys">
      ${buttons}
      <button class="secundary" onmousedown=${() => emit('clear')}>
        <img src="icons/close.png" alt="x">
      </button>
    </div>
  `
}

function PhotoBooth(state, emit) {
  let photoBoothEnabledClass = state.selectedKey ? '' : 'disabled'
  let image = state.images[state.selectedKey]
  let downloadEnabledClass = image ? '' : 'disabled'
  let previewElement = html``

  function onCameraClick() {
    if (state.cameraStream === null) {
      emit('remove-image')
      emit('start-camera-stream')
    } else {
      if (image) {
        emit('remove-image')
      } else {
        emit('capture-image')
      }
    }
  }

  if (state.selectedKey) {
    if (image) {
      previewElement = html`<div style="background-image: url(${image})" />`
    } else if (state.cameraStream !== null) {
      previewElement = html`<video id="video" autoplay="true"></video>`
      previewElement.srcObject = state.cameraStream
    }
  }



  return html`
    <div id="photo-booth" class="${photoBoothEnabledClass}">
      <div class="preview">
        ${previewElement}
      </div>
      <div class="controls">
        <button onmousedown=${onCameraClick}>
          <img src="icons/camera.png" alt="capture">
        </button>
        <button onmousedown=${() => emit('upload-image')}>
          <img src="icons/upload.png" alt="upload">
        </button>
        <button
          class="${downloadEnabledClass}"
          onmousedown=${() => emit('download-image')}
          >
          <img src="icons/download.png" alt="download">
        </button>
        <button
          class="secundary"
          onmousedown=${() => emit('remove-image')}
          >
          <img src="icons/close.png" alt="remove">
        </button>
      </div>
    </div>
  `
}

function SoundRecorder(state, emit) {
  let photoBoothEnabledClass = (state.selectedKey && state.selectedKey !== 'display') ? '' : 'disabled'
  let sound = state.sounds[state.selectedKey]
  let controlsEnabledClass = sound ? '' : 'disabled'

  let meter = state.soundAmplitudes[state.selectedKey]
  let preview = html`<div class="preview"></div>`

  if (
    (sound && meter.length > 0)
    || (state.recorder && state.recorder.state === 'started')
  ) {
    preview = html`
      <div class="preview" onmousedown=${(e) => emit('handle-crop-click', e)}>
        ${meter.map((p) => html`<div class="wave" style="height: ${p}%"></div>`)}
        <div class="crop" style="width: ${state.soundCrops[state.selectedKey] * 100}%"></div>
      </div>
    `
  } else if (sound && meter.length === 0) {
    preview = html`
      <div class="preview"><img src="icons/file.png" alt="File"/></div>
    `
  }

  let micMessage = html`<img src="images/clicktoenable.png" alt="click to enable">`
  if (state.recorder) {
    micMessage = html`<img src="images/holdtorecord.png" alt="hold to record">`
  }
  let holdToRecord = html`
    <button
      class="hold-to-record"
      onmousedown=${() => emit('start-recording')}
      >
      <img class="mic" src="icons/mic.png" alt="microphone">
      ${micMessage}
    </button>
  `

  let soundControl = html`
    <button onmousedown=${() => emit('play-sound')} class="${controlsEnabledClass}">
      <img src="icons/play.png" alt="play">
    </button>
  `
  if (state.sounds[state.selectedKey] && state.sounds[state.selectedKey].state === 'started') {
    soundControl = html`
      <button onmousedown=${() => emit('stop-sound')} class="${controlsEnabledClass}">
        <img src="icons/stop.png" alt="stop">
      </button>
    `
  }

  return html`
    <div id="sound-recorder" class="${photoBoothEnabledClass}">
      ${preview}
      ${holdToRecord}
      <div class="controls">
        ${soundControl}
        <button onmousedown=${() => emit('upload-sound')}>
          <img src="icons/upload.png" alt="upload">
        </button>
        <button onmousedown=${() => emit('download-sound')} class="${controlsEnabledClass}">
          <img src="icons/download.png" alt="download">
        </button>
        <button class="secundary" onmousedown=${() => emit('remove-sound')}>
          <img src="icons/close.png" alt="remove sound">
        </button>
      </div>
    </div>
  `
}

function Fullscreen(state, emit) {
  let imgData = dataToDisplay(state, emit)
  let style = `background-image: url('${imgData}')`
  return html`
    <div id="fullscreen">
      <div id="display-image" style="${style}">
        <button id="fullscreen-button" class="primary" onmousedown=${() => emit('toggle-fullscreen')}>
          <img src="icons/fullscreen.png" alt="fullscreen">
        </button>
      </div>
    </div>
  `
}

function Waiting(state, emit) {
  return html`
    <div id="waiting" onclick=${() => false}>
      <div>
        <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
      </div>
    </div>
  `
}

function ClickHere(state, emit){
  return html`
  <div id="waiting" onclick=${() => false}>
    <div>
    <div>click to start</div>
    </div>
  </div>
`
}

function Tutorial(state, emit) {
  return html`
    <div id="tutorial">
      <div class="backdrop" onclick=${() => emit('exit-tutorial')}></div>
      <video class="video" width="80%" controls>
        <source src="images/tutorial.mp4" type="video/mp4">
        <source src="images/tutorial.webm" type="video/webm">
      </video>
    </div>
  `
}

window.addEventListener('load', () => {
  let app = Choo()
  app.use(store)
  app.route('*', mainView)
  app.mount('#app')
})