import { ref, computed, watch } from 'vue'
import { groupBy, orderBy } from 'lodash-es'

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

import { useSubsonicApi } from '../subsonicApi'
import { useMainStore } from '../store/main'
import { useFavouriteStore } from '../store/favourite'
import { useRadioStore } from '../store/radio'
import { usePlayerStore } from '../store/player'

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

export const ArtistView = ({ id = null, tracksView = false }: { id?: string | null, tracksView?: boolean }) => {
  let
    generator: AsyncGenerator | null = null

  const
    subsonicApi = useSubsonicApi(),

    mainStore = useMainStore(),
    favouriteStore = useFavouriteStore(),
    playerStore = usePlayerStore(),
    radioStore = useRadioStore(),

    hasMore = ref<boolean>(false),
    isFavourite = ref<boolean>(false),
    sort = ref<string>('albums'),
    artists = ref<Artist[]>([]),
    artist = ref<Artist>(),
    albums = ref<{ releaseType: string, albums: Album[] }[]>(),
    tracks = ref<Track[]>([]),

    toggleAlbumSortOrder = () => mainStore.toggleArtistAlbumSortOrder(),
    toggleFavourite = () => {
      if (!id)
        return 

      favouriteStore.toggle('artist', id)
      isFavourite.value = favouriteStore.get('artist', id)
    },

    playNow = () => (!!artist.value?.topTracks && playerStore.playNow(artist.value.topTracks)),
    shuffleNow = () => (!!id && radioStore.shuffleArtist(id)),
    radioNow = () => (!!id && radioStore.radioArtist(id)),

    formatReleaseType = (value: string) => {
      switch (value.toUpperCase()) {
      case 'ALBUM': return 'Albums'
      case 'EP': return 'EPs'
      case 'SINGLE': return 'Singles'
      case 'COMPILATION': return 'Compilations'
      default: return value
      }
    },

    fetchArtists = async () => {
      try {
        mainStore.isLoading = true
        artists.value = []

        const response = await subsonicApi.getArtists()

        if (sort.value === 'a-z') {
          artists.value = orderBy(response, 'name')
        } else {
          artists.value = orderBy(response, 'albumCount', 'desc')
        }
      } finally {
        mainStore.isLoading = false
      }
    },

    fetchArtist = async() => {
      if (!id)
        return 

      try {
        mainStore.isLoading = true
        const
          artistResponse = await subsonicApi.getArtistDetails(id),
          groupOrder = ['ALBUM', 'EP', 'SINGLE']
     
        artist.value = artistResponse,
        isFavourite.value = favouriteStore.get('artist', id),
        albums.value = (
          Object.entries(
            groupBy(
              orderBy(
                artistResponse?.albums ?? [],
                [ 'year', 'name' ],
                [ mainStore.artistAlbumSortOrder, mainStore.artistAlbumSortOrder ]
              ),
              'releaseType'
            )
          ).sort(
            ([aType], [bType]) => {
              const [a, b] = [ groupOrder.indexOf(aType), groupOrder.indexOf(bType) ]

              return (
                (a === -1 && b === -1)
                ? 0
                : (
                  (a === -1)
                  ? 1
                  : (
                    (b === -1)
                    ? -1
                    : a - b
                  )
                )
              )
            }
          ).map(
            ([releaseType, albums]) => ({
              releaseType,
              albums: albums || [],
            } as { releaseType: string, albums: Album[] })
          )
        )
      } catch (error) {
        console.log(error)
      } finally {
        mainStore.isLoading = false
      }
    },

    loadMoreTracks = async () => {
      if (!id)
        return 

      try {

        if (generator === null) {
          const subsonicApi = useSubsonicApi()
          generator = await subsonicApi.getTracksByArtist(id)
        }

        mainStore.isLoading = true
        const { value, done } = await generator.next()

        if (value !== undefined)
          tracks.value.push(...value)

        hasMore.value = !done
      } finally {
        mainStore.isLoading = false
      }
    }

  watch(
    () => [ id, sort.value ],
    () => (
      (!id)
      ? fetchArtists()
      : fetchArtist()
    ),
    { immediate: true }
  )

  return vine`
    <template v-if="!id">
      <div class="row align-items-center justify-content-space-between">
        <span class="main-title flex-grow">
          <Icon icon="artists" />
          Artists
        </span>
        <div>
          <select v-model="sort" name="sort" title="Sort by...">
            <option value="albums">Most albums</option>
            <option value="a-z">Alphabetically</option>
          </select>
        </div>
      </div>
      <ArtistList :items="artists" tile-size="200" />
    </template>
  
    <template v-if="artist">
      <Header :image="artist.image" :hover="'Play/Pause'" @click="shuffleNow">
        <small class="noselect">Artist</small>
        <h1>
          {{ artist.name }}
          <template v-if="artist.lastFmUrl || artist.musicBrainzUrl">
            <a v-if="artist.lastFmUrl" role="button" :href="artist.lastFmUrl" target="_blank" rel="noopener noreferrer" data-tooltip="Last.fm">
              <Icon icon="lastfm" />
            </a>
            <a v-if="artist.musicBrainzUrl" role="button" :href="artist.musicBrainzUrl" target="_blank" rel="noopener noreferrer" data-tooltip="MusicBrainz">
              <Icon icon="musicbrainz" />
            </a>
          </template>
        </h1>

        <div class="row align-items-center">
          <span><strong>{{ artist.albumCount }}</strong> albums</span>
          <span class="seperator" />
          <span><strong>{{ artist.trackCount }}</strong> tracks</span>

          <template v-if="artist.genres.length > 0">
            <span class="seperator" />
            <span v-for="({ name: genre }, index) in artist.genres" :key="genre">
              <span v-if="index > 0">, </span>
              <router-link :to="{name: 'genre', params: { id: genre }}">
                {{ genre }}
              </router-link>
            </span>
          </template>
        </div>

        <div class="scroll" v-if="artist.description">
          {{ artist.description }}
        </div>

        <div class="row text-nowrap">
          <button class="contrast" v-if="artist.trackCount > 0" data-tooltip="Play Artist Top Tracks" @click="playNow">
            <Icon icon="play" />
            Play
          </button>
          <button v-if="artist.trackCount > 0" data-tooltip="Artist Shuffle" @click="shuffleNow">
            <Icon icon="shuffle" />
          </button>
          <button v-if="artist.trackCount > 0" data-tooltip="Artist Radio" @click="radioNow">
            <Icon icon="radio" />
          </button>
          <button v-if="artist.trackCount > 0" data-tooltip="Favourite Artist" @click="toggleFavourite">
            <Icon :icon="isFavourite ? 'heart-fill' : 'heart'" />
          </button>
        </div>
      </Header>

      <template v-if="!tracksView">
        <template v-if="artist.topTracks.length > 0">
          <div class="row align-items-center align-content-center">
            <span class="section-title flex-grow">
              Top tracks
            </span>
            <router-link :to="{ name: 'artist-tracks', params: { id } }">
              View all
            </router-link>
          </div>
          <TrackList :tracks="artist.topTracks" hide-artist />
        </template>

        <div v-for="({ releaseType, albums: releaseTypeAlbums }) in albums" :key="releaseType">
          <div class="row align-items-center">
            <span class="section-title flex-grow">
              <Icon icon="albums" />
              {{ formatReleaseType(releaseType) }} <small>({{ releaseTypeAlbums.length }})</small>
            </span>
            <button @click="toggleAlbumSortOrder">
              <Icon icon="sort" />
            </button>
          </div>
          <AlbumList :items="releaseTypeAlbums">
            <template #text="{ year }">
              {{ year || 'Unknown' }}
            </template>
          </AlbumList>
        </div>

        <template v-if="artist.similarArtist.length > 0">
          <div class="row align-items-center">
            <span class="section-title">
              <Icon icon="artists" />
              Similar artists
            </span>
          </div>
          <ArtistList :items="artist.similarArtist" allow-h-scroll />
        </template>
      </template>

      <template v-else>
        <TrackList v-if="tracks.length > 0" :tracks="tracks" />
        <InfiniteLoader :is-loading="mainStore.isLoading" :has-more="hasMore" @load-more="loadMore" />
      </template>
    </template>

    <EmptyIndicator v-if="!mainStore.isLoading && (!artist || !artists.length)" />
  `
}