{% extends "public.html" %} {% block page %} {% raw %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-sm-6 col-md-5 col-lg-4">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <p style="font-size: 22px">Currently playing</p>
        <div class="row">
          <div class="col-4">
            <img style="width: 100px" :src="currentPlaylist[0].image" />
          </div>
          <div class="col-8">
            <strong style="font-size: 20px"
              >{{ currentPlaylist[0].name }}</strong
            ><br />
            <strong style="font-size: 15px"
              >{{ currentPlaylist[0].artist }}</strong
            >
          </div>
        </div>
      </q-card-section>
    </q-card>

    <q-card class="q-mt-lg">
      <q-card-section>
        <p style="font-size: 22px">Pick a song</p>
        <q-select
          outlined
          v-model="playlist"
          :options="playlists"
          label="playlists"
          @input="selectPlaylist()"
        ></q-select>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-virtual-scroll
          style="max-height: 300px"
          :items="currentPlaylist"
          separator
        >
          <template v-slot="{ item, index }">
            <q-item
              :key="index"
              dense
              clickable
              v-ripple
              @click="payForSong(item.id, item.name, item.artist, item.image)"
            >
              <q-item-section>
                <q-item-label>
                  {{ item.name }} - ({{ item.artist }})
                </q-item-label>
              </q-item-section>
            </q-item>
          </template>
        </q-virtual-scroll>
      </q-card-section>
    </q-card>
  </div>
  <div class="col-12 col-sm-6 col-md-5 col-lg-4 q-gutter-y-md">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <p style="font-size: 21px">Queued</p>
        <br />
        <q-list bordered separator>
          <q-item
            bordered
            v-for="song in queued"
            :key="song.id"
            clickable
            v-ripple
            @click="payForSong(song.id, song.name, song.artist, song.image)"
          >
            <q-item-section prepend>
              <img style="width: 50px" :src="song.image" />
            </q-item-section>

            <q-item-section>{{ song.name }} ({{ song.artist }})</q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
    </q-card>
  </div>
  <q-dialog v-model="receive.dialogues.first" position="top">
    <q-card class="q-pa-lg lnbits__dialog-card">
      <q-card-section class="q-pa-none">
        <div class="row">
          <div class="col-4">
            <img style="width: 100px" :src="receive.image" />
          </div>
          <div class="col-8">
            <strong style="font-size: 20px">{{ receive.name }}</strong><br />
            <strong style="font-size: 15px">{{ receive.artist }}</strong>
          </div>
        </div>
      </q-card-section>
      <br />
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn outline color="grey" @click="getInvoice(receive.id)"
          >Play for {% endraw %}{{ price }}{% raw %} sats
        </q-btn>
      </div>
    </q-card>
  </q-dialog>
  <q-dialog v-model="receive.dialogues.second" position="top">
    <q-card class="q-pa-lg lnbits__dialog-card">
      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
        <qrcode
          :value="'lightning:' + receive.paymentReq"
          :options="{width: 800}"
          class="rounded-borders"
        ></qrcode>
      </q-responsive>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
          >Copy invoice</q-btn
        >
      </div>
    </q-card>
  </q-dialog>
</div>
{% endraw %} {% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
<style></style>
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data() {
      return {
        currentPlaylist: {},
        playlists: {},
        playlist: '',
        heavyList: [],
        queued: [],
        receive: {
          dialogues: {
            first: false,
            second: false
          },
          paymentReq: '',
          name: '',
          artist: '',
          image: '',
          id: '',
          showQR: false
        }
      }
    },
    computed: {},
    methods: {
      closeReceiveDialog() {},
      payForSong(song_id, name, artist, image) {
        self = this
        self.receive.name = name
        self.receive.artist = artist
        self.receive.image = image
        self.receive.id = song_id
        self.receive.dialogues.first = true
      },
      getInvoice(song_id) {
        LNbits.api
          .request(
            'GET',
            '/jukebox/api/v1/jukebox/jb/invoice/' +
              '{{ juke_id }}' +
              '/' +
              song_id
          )
          .then(function (response) {
            console.log(response.data)
            self.receive.paymentReq = response.data[1]
            self.receive.dialogues.second = true
          })
          .catch(err => {
            LNbits.utils.notifyApiError(err)
          })
      },
      selectPlaylist() {
        self = this
        LNbits.api
          .request(
            'GET',
            '/jukebox/api/v1/jukebox/jb/playlist/' +
              '{{ juke_id }}' +
              '/' +
              self.playlist.split(',')[0].split('-')[1]
          )
          .then(function (response) {
            console.log(response.data)
            self.currentPlaylist = response.data
            console.log(self.currentPlaylist[2].id)
          })
          .catch(err => {
            LNbits.utils.notifyApiError(err)
          })
      }
    },
    created() {
      this.playlists = JSON.parse('{{ playlists | tojson }}')

      self = this
      console.log(
        '/jukebox/api/v1/jukebox/jb/' +
          '{{ juke_id }}' +
          '/' +
          self.playlists[0].split(',')[0].split('-')[1] +
          '/'
      )
      LNbits.api
        .request(
          'GET',
          '/jukebox/api/v1/jukebox/jb/playlist/' +
            '{{ juke_id }}' +
            '/' +
            self.playlists[0].split(',')[0].split('-')[1]
        )
        .then(function (response) {
          console.log(response.data)
          self.currentPlaylist = response.data
          console.log(self.currentPlaylist[2].id)
        })
        .catch(err => {
          LNbits.utils.notifyApiError(err)
        })
    }
  })
</script>
{% endblock %}