import { computed } from 'vue'

import type { Playlist } from '../types'
import { useSubsonicApi } from '../subsonicApi'
import { usePlayerStore } from '../store/player'

export const PlaylistList = ({
  items,
  allowHScroll = false,
  isPlaylistView = false,
  tileSize = 200,
}: {
  items: Playlist[],
  allowHScroll?: boolean,
  isPlaylistView?: boolean,
  tileSize?: number,
}) => {
  const
    api = useSubsonicApi(),
    playerStore = usePlayerStore(),
    playNow = async(id: string) => {
      playerStore.setShuffle(false)
      const playlist = await api.getPlaylist(id)
      return playerStore.playTrackList(playlist.tracks!)
    }

  return vine`
    <Tiles :tile-size="tileSize" :allow-h-scroll="allowHScroll">
      <Tile
        v-for="(item, index) in items"
        :key="item.id || index"
        :to="{ name: 'playlist', params: { id: item.id } }"
        :title="item.name || 'Untitled Playlist'"
        :image="item.image || ''"
      >
        <template #title>
          <router-link :to="{ name: 'playlist', params: { id: item.id } }">
            {{ item.name }}
          </router-link>
        </template>

        <!-- Tracks info -->
        <template #text>
          <strong>{{ item.trackCount || 0 }}</strong> tracks
        </template>

        <!-- Context Menu -->
        <template #context-menu>
          <DropdownItem icon="play" @click="playNow(item.id)">
            Play
          </DropdownItem>

          <DropdownItem v-if="isPlaylistView" icon="edit" @click="$emit('edit-playlist', item)">
            Edit
          </DropdownItem>

          <DropdownItem v-if="isPlaylistView" icon="trash" @click.stop.prevent="$emit('remove-playlist', item.id)">
            Remove
          </DropdownItem>
        </template>
      </Tile>
    </Tiles>
  `
}