import { ref, watch } from 'vue'

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

import { useMainStore } from '../store/main'
import { useFavouriteStore } from '../store/favourite'

import { AlbumList } from '../components/AlbumList.vine'
import { ArtistList } from '../components/ArtistList.vine'
import { TrackList } from '../components/TrackList.vine'

export const FavouritesView = ({ section = 'tracks' }: { section?: string }) => {
  const
    api = useSubsonicApi(),
    favouriteStore = useFavouriteStore(),

    state = ref< null | {
      artists: Artist[],
      albums: Album[],
      tracks: Track[],
    }>(null),

    fetchFavourites = async () => {
      const result = await api.getFavourites()

      state.value = {
        artists: result?.artists.filter((artist: Artist) => favouriteStore.artists[artist.id]),
        albums: result?.albums.filter((album: Album) => favouriteStore.albums[album.id]),
        tracks: result?.tracks.filter((track: Track) => favouriteStore.tracks[track.id]),
      }
    }

  watch(
    favouriteStore,
    fetchFavourites,
    { deep: true, immediate: true }
  )

  return vine`
    <div class="row align-items-center justify-content-space-between">
      <span class="main-title">
        <Icon icon="heart-fill" />
        Favourites
      </span>
      <nav>
        <router-link role="button" :to="{... $route, params: { section: 'tracks' }}">
          <Icon icon="tracks" /> Tracks
        </router-link>
        <router-link role="button" :to="{... $route, params: { section: 'albums' }}">
          <Icon icon="albums" /> Albums
        </router-link>
        <router-link role="button" :to="{... $route, params: { section: 'artists' }}">
          <Icon icon="artists" /> Artists
        </router-link>
      </nav>
    </div>

    <template v-if="state">
      <template v-if="section === 'tracks'">
        <TrackList v-if="state.tracks.length > 0" :tracks="state.tracks" />
        <EmptyIndicator v-else />
      </template>

      <template v-if="section === 'albums'">
        <AlbumList v-if="state.albums.length > 0" :items="state.albums" tile-size="200" />
        <EmptyIndicator v-else />
      </template>

      <template v-if="section === 'artists'">
        <ArtistList v-if="state.artists.length > 0" :items="state.artists" tile-size="200" />
        <EmptyIndicator v-else />
      </template>
    </template>
  `;
}