<template>
  <div class="home">
    <img src="../assets/logo.png" alt="voozik logo">
    <div v-if="serverConnected">
      <h1 class="title is-1 has-text-success">Server online</h1>
      <div v-if="isLoggedIn">
        <h1 class="title is-4">{{serverStatus.userCount}} users | {{serverStatus.roomCount}} rooms</h1>
        <h1 class="subtitle is-6">Connected as {{userName}}</h1>
        <hr>
        <b-field position="is-centered">
          <b-button type="is-primary" size="is-large" @click="connectToRoomPrompt">Join a room</b-button>
        </b-field>
        <b-field position="is-centered">
          <b-button size="is-large" icon-right="qrcode" @click="isQRModalActive = true" />
        </b-field>
        <hr>
        <b-button type="is-primary" size="is-large" @click="makeRoomPrompt">Make a room</b-button>
        <hr>
        <b-button @click="changeName">Change name</b-button>
        <b-modal :active.sync="isQRModalActive" has-modal-card trap-focus>
          <QRReader v-on:get-code="connectToRoom"/>
        </b-modal>
      </div>
    </div>
    <div v-else>
      <h1 class="title is-1 has-text-danger">Server offline</h1>
      <h1 class="subtitle">it is sad day</h1>
    </div>
  </div>
</template>

<script>
import { send } from '../store/signalPlugin'
import QRReader from './../components/QRReader'

export default {
  name: 'Home',
  components: {
    QRReader
  },
  data () {
    return {
      isQRModalActive: false
    }
  },
  computed: {
    serverStatus () {
      return this.$store.state.app.serverStatus
    },
    serverConnected () {
      return this.$store.state.app.signalServerConnected
    },
    isLoggedIn () {
      return this.$store.state.app.loginSuccess
    },
    userName () {
      return this.$store.state.rtc.name
    }
  },
  watch: {
    serverConnected: async function (isConnected) {
      if (!this.isLoggedIn && this.serverConnected) {
        setTimeout(send({ type: 'alive' }), 5000)
        const name = await localStorage.getItem('name')
        if (name) this.login(name)
        else this.loginPrompt()
      }
    },
    isLoggedIn: function (success) {
      // a cause de null = false
      if (success === false) {
        this.$buefy.toast.open({
          message: 'Invalid login',
          type: 'is-danger'
        })
        this.$store.dispatch('app/resetLogin')
        this.loginPrompt()
      }
    }
  },
  methods: {
    loginPrompt () {
      this.$buefy.dialog.prompt({
        message: 'Choose a name',
        trapFocus: true,
        canCancel: false,
        inputAttrs: {
          placeholder: 'pedro',
          minlength: 3,
          maxlength: 30
        },
        confirmText: 'KK',
        onConfirm: (name) => {
          localStorage.setItem('name', name)
          this.login(name)
        }
      })
    },
    login (name) {
      send({
        type: 'login',
        name: name
      })
      this.$store.dispatch('rtc/setName', name)
    },
    makeRoomPrompt () {
      this.$buefy.dialog.prompt({
        message: 'Choose a room name',
        trapFocus: true,
        inputAttrs: {
          placeholder: 'mah roomy',
          minlength: 3,
          maxlength: 30
        },
        cancelText: 'Nah',
        confirmText: 'Go',
        onConfirm: (name) => this.makeRoom(name)
      })
    },
    makeRoom (name) {
      send({
        type: 'createRoom',
        name: name
      })
      this.$store.dispatch('room/setRoomName', name)
    },
    connectToRoomPrompt () {
      this.$buefy.dialog.prompt({
        message: 'Enter room code',
        trapFocus: true,
        inputAttrs: {
          placeholder: 'mah roomy',
          minlength: 3,
          maxlength: 30
        },
        cancelText: 'Nah',
        confirmText: 'Connect',
        onConfirm: (code) => this.connectToRoom(code)
      })
    },
    connectToRoom (code) {
      send({
        type: 'connectRoom',
        name: code
      })
    },
    changeName () {
      localStorage.removeItem('name')
      this.loginPrompt()
    }
  }
}
</script>

<style>
.home {
  text-align: center;
  color: #2c3e50;
  margin: 20px 15px 0px 15px;
}
</style>
