<template>
  <div>
    <div class="column">
      <div class="row">
        <h6>Level Select</h6>
        <input style="margin-left: 10px" v-model="obstacleSetNumber">
      </div>
      <div class="">
        <button class="positive" @click="newWave()"><i>add</i><span class="icon-align">New Wave</span></button>
        <button class="negative" @click="clearWaves()"><i>delete_forever</i><span>Clear Waves</span></button>
        <button class="primary" @click="toggleAudio()"><i>volume_{{playSound ? 'off' : 'up'}}</i><span>{{playSound ? 'Mute' : 'Play'}} Audio</span></button>
      </div>
      <table class="q-table striped-odd">
        <thead>
          <tr>
            <th class="text-center">Frequency</th>
            <th class="text-center">Amplitude</th>
            <th class="text-center">Phase</th>
            <th class="text-center">Edit</th>
            <th class="text-center">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="wave in waves">
            <td class="text-right">{{wave.frequency}}</td>
            <td class="text-right">{{wave.amplitude}}</td>
            <td class="text-right">{{wave.phase}}</td>
            <td class="text-center" @click="updateActiveWave(wave)"><i>edit</i></td>
            <td class="text-center" @click="deleteWave(wave)"><i>clear</i></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex';
  import * as types from '../store/mutationTypes';
  import _ from 'lodash';

  export default {
    data () {
      return {}
    },
    computed: {
      ...mapState(['waves', 'playSound']),
      obstacleSetNumber: {
        get () {
          return this.$store.state.currentObstacleSet + 1;
        },
        set (valueString) {
          const value = parseInt(valueString, 10);
          const number = _.isNumber(value) && this.$store.state.obstacleSets[value - 1] && value - 1 || 0;
//          debugger;
          this.updateCurrentObstacleSet(number);
        }
      }
    },
    methods: {
      ...mapMutations({
        addWave: [types.ADD_WAVE],
        deleteWave: [types.DELETE_WAVE],
        clearWaves: [types.CLEAR_WAVES],
        updateActiveWave: [types.UPDATE_ACTIVE_WAVE],
        toggleAudio: [types.TOGGLE_AUDIO],
        updateCurrentObstacleSet: [types.UPDATE_CURRENT_OBSTACLE_SET]
      }),
      newWave() {
        let wave = { frequency: 1, amplitude: 100, phase: 0};
        this.addWave(wave);
        this.updateActiveWave(wave);
      }
    }
  }
</script>

<style scoped>
  .icon-align {
    vertical-align: text-bottom;
  }

  button {
    margin-right: 10px;
  }
</style>
