<template>

<q-page padding class="" >
<q-list class="">
<q-field
label="Command"
orientation="vertical"
>
<q-item><q-input inverted color="secondary" v-model="cmd" /><q-btn class="row" color="green-8" round @click="send" icon="send" /></q-item>
</q-field>
<q-field class=""
  label="Payload"
  orientation="vertical"
  >
<q-item><div class="col">Key</div>:<div class="col">Value</div></q-item>
<q-item><q-input class="col" inverted color="secondary" v-model="key[0]" />:<q-input class="col" inverted color="secondary" v-model="value[0]" /></q-item>
<q-item><q-input class="col" inverted color="secondary" v-model="key[1]" />:<q-input class="col" inverted color="secondary" v-model="value[1]" /></q-item>
<q-item><q-input class="col" inverted color="secondary" v-model="key[2]" />:<q-input class="col" inverted color="secondary" v-model="value[2]" /></q-item>
</q-field>
</q-list>
<q-btn :class="switches[0]" @click="toggle(1)">Switch 1</q-btn>
<q-btn :class="switches[1]"  @click="toggle(2)">Switch 2</q-btn>
<q-btn :class="switches[2]"  @click="toggle(3)">Switch 3</q-btn>
<q-btn :class="switches[3]"  @click="toggle(4)">Switch 4</q-btn>
<q-input class="row" rows="2" v-model="packet" readonly inverted type="textarea" float-label="Sending Packet:" />
<q-input class="row" rows="2" v-model="response" readonly inverted color="secondary" type="textarea" float-label="Socket/Server Response:" />
<q-input class="row" rows="2" v-model="respayload" readonly inverted color="secondary" type="textarea" float-label="Socket/Server Response Payload:" />
<q-input class="row" rows="2" v-model="pushed" readonly inverted color="tertiary" type="textarea" float-label="Pushed from Socket/Server:" />
</q-page>
</template>
<script>
import btc from 'better-try-catch'
// import socket from '../socket.js'

export default {
  data () {
    return {
      cmd: '',
      packet: '',
      response: '',
      respayload: {},
      key: [],
      value: [],
      pushed: '',
      switches: ['off', 'off', 'off', 'off']
    }
  },
  methods: {
    async send () {
      let packet = {
        cmd: this.cmd,
        [this.key[0]]: this.value[0],
        [this.key[1]]: this.value[1],
        [this.key[2]]: this.value[2]
      }
      this.packet = JSON.stringify(packet)
      let [err, res] = await btc(this.$socket.send)(packet)
      if (err) console.log('error ', err)
      else {
        delete res._header
        this.response = res.log
        delete res.Response
        this.packet_process(res)
        this.respayload = JSON.stringify(res)
      }
    },
    setcolor (id) {
      return this.switches[id]
    },
    packet_process (packet) {
      if (packet.cmd === 'switch/status') {
        this.switches[packet.id - 1] = packet.status
        this.pushed = ''
      }
    },
    async toggle (id) {
      let packet = {
        cmd: 'switch/toggle',
        id: id,
        status: this.switches[id - 1]
      }
      this.packet = JSON.stringify(packet)
      let [err, res] = await btc(this.$socket.send)(packet)
      if (err) console.log('error ', err)
      else {
        delete res._header
        this.response = JSON.stringify(res)
      }
    }
  },
  async mounted () {
    console.log('mounting')
    this.$q.notify({
      type: 'info',
      message: `Client connecting to', ${this.$socket.url}`
    })
    let [err] = await btc(this.$socket.connect)()
    if (err) {
      this.$q.notify({
        type: 'negative',
        message: 'Websocket Server Not Available'
      })
    } else {
      this.$q.notify({ type: 'positive', message: 'Ready' })
      this.$socket.listen()
    }
    this.$socket.on('pushed', packet => {
      delete packet._header
      this.packet_process(packet)
      this.pushed = JSON.stringify(packet)
    })
  }
}
</script>

<style lang="stylus">
@import '~variables'

.on
    background $positive

.off
    background grey

</style>
