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

import type { Album, AlbumGenre, Genre, Artist, Playlist } from '../types'

import { useSubsonicApi } from '../subsonicApi'

import { reloadToken } from '../reload'
import { useMainStore } from '../store/main'
import { useRadioStore } from '../store/radio'

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

export const DiscoverView = () => {
  const
    subsonicApi = useSubsonicApi(),

    mainStore = useMainStore(),
    radioStore = useRadioStore(),

    lastGenre = ref<AlbumGenre | null>(null),
    result = ref({
      genres: [] as Genre[],
      mood: [] as Album[],
      favartists: [] as Artist[],
      favalbums: [] as Album[],
      playlists: [] as Playlist[],
      played: [] as Album[],
      most: [] as Album[],
      recent: [] as Album[],
      random: [] as Album[],
    }),

    empty = computed(() => Object.values(result.value).findIndex(x => x.length > 0) === -1),

    clearState = () => Object.assign(result.value, {
      recent: [],
      played: [],
      mood: [],
      most: [],
      favalbums: [],
      favartists: [],
      genres: [],
      playlists: [],
      random: [],
    }),

    fetchData = async () => {
      if (mainStore.isLoading)
        return

      try {
        mainStore.isLoading = true

        subsonicApi.getGenres()
          .then((genres: Genre[]) => {
            const genreNames = genres.map((genre: Genre) => ({ ...genre, id: genre.name }))
            result.value.genres = orderBy(genreNames, 'albumCount', 'desc')
          })

        subsonicApi.getFavourites()
          .then(favourites => {
            result.value.favartists = favourites.artists.slice(0, 16)
            result.value.favalbums = favourites.albums.slice(0, 16)
          })

        subsonicApi.getAlbums('recently-played', 24)
          .then(async played => {
            result.value.played = played
            if (played.length === 0) return

            const lastPlayed = played[0]
            lastGenre.value = (lastPlayed as Album).genres[0]!
            if (!lastGenre.value) return
            const shuffled = true
            const albumsByGenre = await subsonicApi.getAlbumsByGenre(lastGenre.value.name, 32, 0, shuffled)
            result.value.mood = albumsByGenre
          })

        subsonicApi.getAlbums('recently-added', 32)
          .then(recent => {
            result.value.recent = recent
          })

        subsonicApi.getPlaylists()
          .then(playlists => {
            result.value.playlists = playlists.slice(0, 10)
          })

        subsonicApi.getAlbums('random', 24)
          .then(random => {
            result.value.random = random
          })

        subsonicApi.getAlbums('most-played', 24)
          .then(most => {
            result.value.most = most
          })
      } finally {
        mainStore.isLoading = false
      }
    },

    radioRecentlyPlayed = () => radioStore.shuffleRecentlyPlayed(),
    radioMostPlayed = () => radioStore.shuffleMostPlayed(),
    radioFavouriteAlbums = () => radioStore.shuffleFavouriteAlbums(),
    radioFavouriteArtists = () => radioStore.shuffleFavouriteArtists(),
    radioRecentlyAdded = () => radioStore.shuffleRecentlyAdded(),
    luckyRadio = () => radioStore.luckyRadio(),
    radioMood = () => (
      (lastGenre.value)
      ? radioStore.shuffleMood(lastGenre.value.name)
      : undefined
    )

  onMounted(fetchData)

  watch(
    reloadToken,
    () => (clearState() && fetchData())
  )

  return vine`
    <div v-if="result.genres.length" class="genres scroll noselect">
      <router-link
        v-for="item in result.genres"
        :key="item.id"
        :to="{ name: 'genre', params: { id: item.id } }"
      >
        {{ item.name }}
      </router-link>
    </div>

    <div v-if="result.mood.length">
      <div class="row align-items-center justify-content-space-between">
        <router-link :to="{ name: 'genre', params: { id: lastGenre.name } }" class="section-title">
          <Icon icon="genres" />
          Current mood
        </router-link>
        <button data-tooltip="Current Mood Radio" @click="radioMood()">
          <Icon icon="radio" />
        </button>
      </div>
      <AlbumList :items="result.mood" tile-size="75" allow-h-scroll two-rows />
    </div>

    <div v-if="result.favalbums.length">
      <div class="row align-items-center justify-content-space-between">
        <router-link :to="{ name: 'favourites' }" class="section-title">
          <Icon icon="heart" />
          Favurited albums
        </router-link>
        <button data-tooltip="Favourite Albums Radio" @click="radioFavouriteAlbums()">
          <Icon icon="radio" />
        </button>
      </div>
      <AlbumList :items="result.favalbums" allow-h-scroll />
    </div>

    <div v-if="result.favartists.length">
      <div class="row align-items-center justify-content-space-between">
        <router-link :to="{ name: 'favourites', params: { section: 'artists' } }" class="section-title">
          <Icon icon="heart-artist" />
          Favurited artists
        </router-link>
        <button data-tooltip="Favourite Artists Radio" @click="radioFavouriteArtists()">
          <Icon icon="radio" />
        </button>
      </div>
      <ArtistList :items="result.favartists" allow-h-scroll />
    </div>

    <div v-if="result.playlists.length">
      <div class="row align-items-center justify-content-space-between">
        <router-link :to="{ name: 'playlists' }" class="section-title">
          <Icon icon="playlist" />
          Playlists
        </router-link>
        <button data-tooltip="Global Radio" @click="luckyRadio()">
          <Icon icon="radio" />
        </button>
      </div>
      <PlaylistList :items="result.playlists" allow-h-scroll />
    </div>

    <div v-if="result.most.length">
      <div class="row align-items-center justify-content-space-between">
        <router-link :to="{ name: 'albums', params: { sort: 'most-played' } }" class="section-title">
          <Icon icon="chart" />
          Most Played
        </router-link>
        <button data-tooltip="Most Played Radio" @click="radioMostPlayed()">
          <Icon icon="radio" />
        </button>
      </div>
      <AlbumList :items="result.most" allow-h-scroll />
    </div>

    <div v-if="result.played.length">
      <div class="row align-items-center justify-content-space-between">
        <router-link :to="{ name: 'albums', params: { sort: 'recently-played' } }" class="section-title">
          <Icon icon="recent" />
          Recently played
        </router-link>
        <button data-tooltip="Recently Played Radio" @click="radioRecentlyPlayed()">
          <Icon icon="radio" />
        </button>
      </div>
      <AlbumList :items="result.played" allow-h-scroll />
    </div>

    <div v-if="result.recent.length">
      <div class="row align-items-center justify-content-space-between">
        <router-link :to="{ name: 'albums', params: { sort: 'recently-added' } }" class="section-title">
          <Icon icon="note-plus" />
          Recently added
        </router-link>
        <button data-tooltip="Recently added Radio" @click="radioRecentlyAdded()">
          <Icon icon="radio" />
        </button>
      </div>
      <AlbumList :items="result.recent" allow-h-scroll />
    </div>

    <div v-if="result.random.length">
      <div class="row align-items-center justify-content-space-between">
        <router-link :to="{ name: 'albums', params: { sort: 'random' } }" class="section-title">
          <Icon icon="random" />
          Get lucky
        </router-link>
        <button data-tooltip="Random play" @click="luckyRadio()"  >
          <Icon icon="radio" />
        </button>
      </div>
      <AlbumList :items="result.random" tile-size="75" allow-h-scroll two-rows />
    </div>
  `
}