import type { Artist } from '../types'
import { useFavouriteStore } from '../store/favourite'

export const ArtistList = ({
  items,
  allowHScroll = false,
  tileSize = 200,
}: {
  items: Artist[],
  allowHScroll?: boolean,
  tileSize?: number,
}) => {
  const
    favouriteStore = useFavouriteStore(),
    isFavourite = (id: string) => favouriteStore.get('artist', id),
    toggleFavourite = async (id: string) => favouriteStore.toggle('artist', id)

  return vine`
    <Tiles :tile-size="tileSize" :allow-h-scroll="allowHScroll">
      <Tile
        v-for="item in items"
        :key="item.id"
        :to="{name: 'artist', params: { id: item.id } }"
        :title="item.name"
        :image="item.image"
      >
        <template #text>
          <strong>{{ item.albumCount }}</strong> albums
        </template>
        <template #context-menu>
          <DropdownItem
            :icon="isFavourite(item.id) ? 'heart-fill' : 'heart'"
            @click.stop="toggleFavourite(item.id)"
          >
            Favorite
          </DropdownItem>
        </template>
      </Tile>
    </Tiles>
  `
}