<template>
  <div>
    <youtube
      ref="youtube"
      v-bind:fitParent="true"
      :video-id="roomStatus.current.linkID"
      :player-vars="playerVars"
      @playing="roomStatus.player.playing">
    </youtube>
    <hr>
    <b-field position="is-centered">
        <b-button class="playerButton" @click="play" :icon-right="roomStatus.player.playing ? 'pause' : 'play'"/>
        <b-button class="playerButton" @click="mute" icon-right="volume-mute"/>
        <b-button class="playerButton" @click="skip" icon-right="skip-next" v-if="isAdmin"/>
        <b-slider class="playerVolume" :min="0" :max="100" :value="100" @change="volume"/>
    </b-field>
    <b-field position="is-centered">
      <b-slider
        rounded
        :min="0"
        :max="roomStatus.player.timeLength"
        :value="roomStatus.player.timeCode"
        :custom-formatter="value => convertTimeCode(value)"
        :disabled="!isAdmin"
        @change="seek"/>
    </b-field>
    <h2 class="subtitle is-6 time">{{convertTimeCode(roomStatus.player.timeCode)}} / {{convertTimeCode(roomStatus.player.timeLength)}}</h2>
  </div>
</template>

<script>
export default {
  name: 'Player',
  props: ['settings'],
  computed: {
    isAdmin () {
      return this.$store.state.room.admin
    },
    roomStatus () {
      return this.$store.state.room.roomStatus
    },
    player () {
      return this.$refs.youtube.player
    },
    playerVars () {
      const adminVars = {
        autoplay: 1,
        controls: 0,
        disablekb: 0,
        modestbranding: 1,
        rel: 0
      }
      const userVars = {
        autoplay: 1,
        controls: 0,
        disablekb: 1,
        modestbranding: 1,
        rel: 0
      }
      return this.isAdmin ? adminVars : userVars
    }
  },
  mounted () {
    this.player.addEventListener('onStateChange', this.playerStateChange)
    // setInterval(this.updateTimeCode, 1000)
  },
  watch: {
    roomStatus: function (status) {
      if (!this.settings.playLink) {
        this.player.pauseVideo()
        return
      }

      this.player.seekTo(status.player.timeCode, true)
      if (status.player.playing) this.player.playVideo()
      else this.player.pauseVideo()
    }
  },
  methods: {
    async playerStateChange (event) {
      console.log('[PLAYER] Status change ' + event.data)
      console.log(await event.target.getVideoData())
      if (this.isAdmin) {
        this.$store.dispatch('room/setCurrent', {
          playerStatus: event.data,
          timeCode: await this.player.getCurrentTime(),
          timeLength: await this.player.getDuration(),
          title: await event.target.getVideoData().title
        })
      }
    },
    play () {
      if (this.roomStatus.player.playing) this.player.pauseVideo()
      else this.player.playVideo()
    },
    async mute () {
      if (await this.player.isMuted()) this.player.unMute()
      else this.player.mute()
    },
    volume (volume) {
      this.player.setVolume(volume)
    },
    skip () {
      this.$store.commit('room/CURRENT_END')
    },
    seek (time) {
      this.player.seekTo(time, true)
    },
    async updateTimeCode () {
      if (this.settings.playLink) this.$store.dispatch('room/setTimeCode', await this.player.getCurrentTime())
    },
    convertTimeCode (timeCode) {
      var minutes = Math.round(timeCode / 60)
      var seconds = Math.round(timeCode % 60)
      if (minutes < 10) minutes = '0' + minutes
      if (seconds < 10) seconds = '0' + seconds
      return minutes + ':' + seconds
    }
  }
}
</script>

<style local>
.controls {
  text-align: center;
  max-width: 500px;
}

.playerButton {
  margin-left: 10px;
}

.playerVolume {
  margin-left: 30px;
  margin-right: 30px;
  max-width: 150px;
}

.time {
  text-align: center;
}
</style>
