<template>
  <div class="room container">
    <h1 class="title is-1">{{roomStatus.roomName}}</h1>
    <h2 class="subtitle">{{roomStatus.current.title}}</h2>

    <b-tabs>
      <b-tab-item label="Playlist">
        <Playlist />
      </b-tab-item>

      <b-tab-item label="Player" :visible="settings.showPlayer && settings.playLink">
        <Player v-bind:settings="settings"/>
      </b-tab-item>

      <b-tab-item label="Admin" :visible="isAdmin">
        <Admin />
      </b-tab-item>

      <b-tab-item label="Invite">
        <Invite v-bind:roomCode="roomStatus.roomCode"/>
      </b-tab-item>

      <b-tab-item label="Settings">
        <b-field label="Player">
          <b-switch v-model="settings.playLink">Play link</b-switch>
        </b-field>
        <b-field>
          <b-switch v-model="settings.showPlayer" :disabled="!settings.playLink">Show player</b-switch>
        </b-field>
        <hr>
        <b-field label="User">
          <b-button type="is-danger" icon-right="exit-to-app" @click="leave">Leave</b-button>
        </b-field>
      </b-tab-item>

    </b-tabs>
    <b-loading is-full-page :active.sync="isRoomLoading"/>
  </div>
</template>

<script>
import Invite from './../components/Invite'
import Admin from './../components/Admin'
import Playlist from './../components/Playlist'
import Player from './../components/Player'

export default {
  name: 'Room',
  components: {
    Invite,
    Admin,
    Playlist,
    Player
  },
  computed: {
    roomStatus () {
      return this.$store.state.room.roomStatus
    },
    isAdmin () {
      return this.$store.state.room.admin
    },
    isLoggedIn () {
      return this.$store.state.app.loginSuccess
    },
    isRoomLoading () {
      return this.roomStatus.roomName === ''
    }
  },
  data () {
    return {
      settings: {
        playLink: false,
        showPlayer: false
      }
    }
  },
  mounted () {
    if (!this.isLoggedIn) this.$router.push({ name: 'Home' })
    if (this.isAdmin) {
      this.settings.playLink = true
      this.settings.showPlayer = true
    }
  },
  methods: {
    leave () {
      this.$store.dispatch('room/leave')
      this.$router.push({ name: 'Home' })
    }
  }
}
</script>

<style>
.room {
  margin-top: 20px;
}
</style>
