import { ref, computed, watch } from 'vue'

import type { Track } from '../types'

import { usePlayerStore } from '../store/player'

import { TrackList } from '../components/TrackList.vine'
import { 
  type ConfirmDialogExpose,
  ConfirmDialog
} from '../components/ConfirmDialog.vine'

export const PlayerQueueView = () => {
  const
    playerStore = usePlayerStore(),

    confirmDialog = ref<ConfirmDialogExpose | null>(null),

    tracks = computed(() => playerStore.queue),
    queueIndex = computed(() => playerStore.queueIndex),

    remove = (index: number) => playerStore.removeFromQueue(index),
    shuffle = () => playerStore.shuffleQueue(),
    play = (index: number) => {
      playerStore.setShuffle(false)

      if (index === queueIndex.value)
        return playerStore.playPause()

      return playerStore.playTrackListIndex(index)
    },

    clear = async () => {
      if (!confirmDialog.value)
        return

      const userConfirmed = await confirmDialog.value.open(
        'Clear queue',
        'Do you really want to clear the queue?'
      )

      if (!userConfirmed)
        return

      playerStore.clearQueue()
    }

  return vine`
    <div class="row">
      <span class="main-title flex-grow">
        <Icon icon="queue" />
        Player Queue
      </span>
      <button :disabled="!tracks.length" @click="play">
        <Icon icon="play" /> Play
      </button>
      <button :disabled="!tracks.length" @click="shuffle">
        <Icon icon="shuffle" /> Shuffle
      </button>
      <button :disabled="!tracks.length" @click="clear">
        <Icon icon="trash" /> Clear
      </button>
    </div>

    <TrackList
      v-if="tracks.length"
      :tracks="tracks"
      active-by="index"
      :show-image="true"
    >
      <template #actions="{ index }">
        <DropdownItem
          icon="trash"
          :disabled="index === queueIndex"
          @click="remove(index)"
        >
          Remove
        </DropdownItem>
      </template>
    </TrackList>
    <EmptyIndicator v-else />

    <Teleport to="#dialogBoxes">
      <ConfirmDialog ref="confirmDialog" />
    </Teleport>
  `;
}