<template>
  <div>
    <b-button v-if="roomSettings.userLink" icon-left="plus" size="is-medium" @click="addLinkPrompt">Add link</b-button>
    <hr>
    <b-table :data="roomStatus.playlist" striped hoverable default-sort="vote">
      <template slot-scope="props">
        <b-table-column field="title" label="Title">
          {{props.row.title}}
        </b-table-column>

        <b-table-column field="link" label="Link">
          {{props.row.link}}
        </b-table-column>

        <b-table-column field="vote" label="Votes">
          {{props.row.votes}}
        </b-table-column>

        <b-table-column field="voters" label="Voters" :visible="isAdmin">
          {{props.row.voters}}
        </b-table-column>

        <b-table-column>
          <b-button v-if="hasVoted(props.row)" icon-left="arrow-down-bold-outline" type="is-primary" size="is-medium" @click="vote (props.row.title, props.row.link, props.row.linkID, false)"/>
          <b-button v-else icon-left="arrow-up-bold-outline" type="is-primary" size="is-medium" @click="vote (props.row.title, props.row.link, props.row.linkID, true)"/>
          <b-button v-if="isAdmin" class="actionButton" icon-left="delete-forever" type="is-danger" size="is-medium" @click="removePlay (props.row.linkID)"/>
        </b-table-column>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: 'Playlist',
  computed: {
    isAdmin () {
      return this.$store.state.room.admin
    },
    roomStatus () {
      return this.$store.state.room.roomStatus
    },
    roomSettings () {
      return this.$store.state.room.roomSettings
    }
  },
  methods: {
    addLinkPrompt () {
      this.$buefy.dialog.prompt({
        message: 'Add a youtube link',
        trapFocus: true,
        inputAttrs: {
          placeholder: 'https://www.youtube.com/watch?v=YItIK09bpKk'
        },
        cancelText: 'Nah',
        confirmText: 'Add',
        onConfirm: (link) => this.addLink(link)
      })
    },
    async addLink (link) {
      const linkID = this.$youtube.getIdFromUrl(link)
      if (linkID === null) {
        this.$buefy.toast.open('Invalid youtube link')
        return
      }
      const infos = await this.getInfos(linkID)
      console.log(infos)
      console.log(infos.title)
      this.vote(infos.title, link, linkID, true)
    },
    vote (title, link, linkID, isPositive) {
      if (this.isAdmin) {
        this.$store.dispatch('room/vote', { title: title, link: link, linkID: linkID, isPositive: isPositive, voterName: this.$store.state.rtc.name })
      } else {
        this.sendVote(link, linkID, isPositive)
      }
    },
    sendVote (link, linkID, isPositive) {
      const message = {
        type: 'vote',
        link: link,
        linkID: linkID,
        isPositive: isPositive,
        voterName: this.$store.state.rtc.name
      }
      this.$store.dispatch('rtc/broadcast', { message: message, type: 'vote' })
    },
    hasVoted (play) {
      return play.voters.includes(this.$store.state.rtc.name)
    },
    removePlay (linkID) {
      this.$store.dispatch('room/removePlay', linkID)
    },
    async getInfos (linkID) {
      const response = await fetch('https://noembed.com/embed?format=json&' + 'url=https://www.youtube.com/watch?v=' + linkID)
      return await response.json()
    }
  }
}
</script>

<style local>
.actionButton {
  margin-left: 10px;
}
</style>
