import { computed } from 'vue'

import type { Album } from '../types'
import { useSubsonicApi } from '../subsonicApi'

import { useCacheStore } from '../store/cache'
import { usePlayerStore } from '../store/player'
import { useFavouriteStore } from '../store/favourite'
import { sleep } from '../utils'

export const AlbumList = ({
  items,
  tileSize = 200,
  allowHScroll = false,
  twoRows = false,
  titleOnly = false,
}: {
  items: Album[],
  tileSize?: number,
  allowHScroll?: boolean,
  twoRows?: boolean,
  titleOnly?: boolean,
}) => {
  const
    subsonicApi = useSubsonicApi(),
    favouriteStore = useFavouriteStore(),
    playerStore = usePlayerStore(),
    cacheStore = useCacheStore(),

    isFavourite = (id: string) => favouriteStore.get('album', id),
    dragstart = (id: string, event: DragEvent) => (event.dataTransfer?.setData('application/x-album-id', id)),

    playNow = async(id: string) => {
      playerStore.setShuffle(false)
      return playerStore.playTrackList((await subsonicApi.getAlbumDetails(id)).tracks!)
    },

    toggleFavourite = async(id: string) => {
      favouriteStore.toggle('album', id)
      await sleep(300)

      const album = await subsonicApi.getAlbumDetails(id)
      if (!album) return
      if (isFavourite(id)) {
        await cacheStore.cacheAlbum(album)
      } else {
        await cacheStore.clearAlbumCache(album)
      }
    }

  return vine`
    <Tiles :tile-size="tileSize" :allow-h-scroll="allowHScroll" :two-rows="twoRows">
      <Tile
        v-for="(item, index) in items"
        :key="item.id || index"
        :to="{ name: 'album', params: { id: item.id } }"
        :title="item.name || 'Unknown Album'"
        :image="item.image || ''"
        draggable="true"
        :title-only="titleOnly"
        @dragstart="dragstart(item.id, $event)"
      >
        <template #text>
          <span v-for="(artist, artistIndex) in item.artists" :key="artist.id">
            <span v-if="artistIndex > 0" class="text-muted">, </span>
            <router-link
              :to="{ name: 'artist', params: { id: artist.id } }"
              class="text-muted"
            >
              {{ artist.name }}
            </router-link>
          </span>
        </template>
        <template v-if="tileSize > 79" #context-menu>
          <DropdownItem icon="play" class="on-top" @click="playNow(item.id)">
            Play
          </DropdownItem>
          <DropdownItem :icon="isFavourite(item.id) ? 'heart-fill' : 'heart'" class="on-top" @click.stop="toggleFavourite(item.id)">
            Ravorite
          </DropdownItem>
        </template>
      </Tile>
    </Tiles>
  `
}