<template>
  <div class="main">
    <h1>Binaural Beats {{ started ? 'started' : 'stopped' }}</h1>
    <button v-on:click="start">Start</button>
    <button v-on:click="stop">Stop</button>
    <select v-model="waveform">
      <option disabled value="">Waveform</option>
      <option>sine</option>
      <option>square</option>
      <option>triangle</option>
      <option>sawtooth</option>
    </select>
    <input v-model="leftEar.frequency.value">
    <input v-model="rightEar.frequency.value">
    <select v-model="preset">
      <option disabled value="">Preset</option>
      <option value="alpha">Alpha waves</option>
      <option value="beta">Beta waves</option>
      <option value="gamma">Gamma waves</option>
      <option value="delta">Delta waves</option>
      <option value="theta">Theta waves</option>
    </select>
    <div class="info" v-if="preset">
      <h2>{{ preset.charAt(0).toUpperCase() + preset.slice(1) }} Waves</h2>
      <p>{{ presets[preset].description }}</p>
    </div>
  </div>
</template>

<script>
import Tone from 'tone'

export default {
  name: 'Main',
  data () {
    return {
      started: false,
      merge: null,
      leftEar: null,
      rightEar: null,
      waveform: 'sine',
      preset: null,
      presets: {
        alpha: {
          waveform: 'sine',
          left: 130,
          right: 115,
          description: 'mediating, daydreaming; routine tasks'
        },
        beta: {
          waveform: 'sine',
          left: 100,
          right: 115,
          description: 'awake, alert, active, engaged'
        },
        gamma: {
          waveform: 'sine',
          left: 160,
          right: 210,
          description: 'ability to process large amounts of information fastly'
        },
        delta: {
          waveform: 'sine',
          left: 120,
          right: 124,
          description: 'relaxation, healing, spiritual'
        },
        theta: {
          waveform: 'sine',
          left: 150,
          right: 155,
          description: 'trance, daydreaming'
        }
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init: function () {
      this.merge = new Tone.Merge().toMaster()
      this.leftEar = new Tone.Oscillator().connect(this.merge.left)
      this.rightEar = new Tone.Oscillator().connect(this.merge.right)
      this.leftEar.frequency.value = 440
      this.rightEar.frequency.value = 430
    },
    start: function () {
      this.leftEar.start()
      this.rightEar.start()
      this.started = true
    },
    stop: function () {
      this.leftEar.stop()
      this.rightEar.stop()
      this.started = false
    }
  },
  watch: {
    waveform: function () {
      this.leftEar.type = this.waveform
      this.rightEar.type = this.waveform
    },
    preset: function () {
      this.waveform = this.presets[this.preset].waveform
      this.leftEar.frequency.value = this.presets[this.preset].left
      this.rightEar.frequency.value = this.presets[this.preset].right
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button, select, input {
  color: black;
  background-color: white;
  border-width: 1px;
  border-style: solid;
}
</style>
