<template>
  <div class="wave-editor-container">
    <wave-edit-viewer :frequency="frequency" :amplitude="amplitude" :phase="phase" class="editor-viewer"></wave-edit-viewer>
    <div class="row">
      <h6 class="slider-label">Frequency</h6>
      <q-range v-model="frequency" :min="1" :max="25" class="primary freq-range" :snap="true" :label="true"></q-range>
    </div>
    <div class="row">
      <h6 class="slider-label">Amplitude</h6>
      <q-range v-model="amplitude" :min="-100" :max="100" class="primary amp-range" :snap="true" :label="true"></q-range>
    </div>
    <div class="row">
      <h6 class="slider-label">Phase</h6>
      <q-range v-model="phase" :min="0" :max="100" class="primary phase-range" :snap="true" :label="true"></q-range>
    </div>
  </div>
</template>

<script>
import WaveEditViewer from './WaveEditViewer';
import { mapMutations } from 'vuex';
import * as mutationTypes from '../store/mutationTypes';

export default {
  name: 'wave-editor',

  components: {
    WaveEditViewer
  },

  data () {
    return {
    }
  },

  computed: {
    frequency: {
      get () {
        return this.$store.state.activeWave.frequency;
      },
      set (freq) {
        this.updateFreq(freq);
      }
    },
    amplitude: {
      get () {
        return this.$store.state.activeWave.amplitude;
      },
      set (amp) {
        this.updateAmp(amp);
      }
    }  ,
    phase: {
      get () {
        return this.$store.state.activeWave.phase;
      },
      set (phase) {
        this.updatePhase(phase);
      }
    }
  },

  methods: {
    ...mapMutations({
      updateFreq: mutationTypes.UPDATE_ACTIVE_WAVE_FREQ,
      updateAmp: mutationTypes.UPDATE_ACTIVE_WAVE_AMP,
      updatePhase: mutationTypes.UPDATE_ACTIVE_WAVE_PHASE
    })
  },
  mounted () {

  }
}
</script>

<style>
  .wave-editor-container {
    width: 620px;
    height: 350px;
  }

  .editor-viewer{
    width: 600px;
    height: 200px;
    background-color: #000;
  }

  .slider-label {
    width: 100px;
  }
</style>
