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

    <b-tabs type="is-boxed" expanded>
      <b-tab-item label="Playlist" icon="playlist-play">
        <Playlist />
      </b-tab-item>

      <b-tab-item label="Player" icon="youtube" :visible="localSettings.playLink">
        <Player />
      </b-tab-item>

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

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

      <b-tab-item label="Settings" icon="cog">
        <Settings />
      </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'
import Settings from './../components/Settings'

export default {
  name: 'Room',
  components: {
    Invite,
    Admin,
    Playlist,
    Player,
    Settings
  },
  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 === ''
    },
    localSettings () {
      return this.$store.state.room.localSettings
    }
  },
  mounted () {
    if (!this.isLoggedIn) this.$router.push({ name: 'Home' })
  }
}
</script>

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

.roomTitle {
  padding-bottom: 30px;
  padding-left: 25px;
}
</style>
