import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import type { Album, AlbumSort } from '../types'

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

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

export const AlbumView = (props: { id?: string | null, sort?: AlbumSort }) => {
  const
    subsonicApi = useSubsonicApi(),

    router = useRouter(),
    route = useRoute(),

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

    sort = ref<AlbumSort>(props.sort ?? 'recently-added'),
    albums = ref<Album[]>([]),
    album = ref<Album | null>(null),
    cached = ref<boolean>(false),
    hasMoreAlbums = ref<boolean>(true),

    isFavourite = computed(() => (!!album.value && favouriteStore.get('album', album.value.id))),
    isPlaying = computed(() => playerStore.isPlaying),
    sortOptions = [
      [ 'recently-added', 'Recently added'],
      [ 'most-played', 'Most played' ],
      [ 'recently-played', 'Recently played' ],
      [ 'random', 'Random' ],
      [ 'a-z', 'Alphabetically' ],
    ],

    fetchAlbums = async() => {
      try {
        mainStore.isLoading = true

        const response = await subsonicApi.getAlbums(sort.value, 30, albums.value.length)
        albums.value.push(...response)
        hasMoreAlbums.value = response.length >= 30
      } finally {
        mainStore.isLoading = false
      }
    },

    fetchAlbum = async() => {
      if (!props.id)
        return

      try {
        mainStore.isLoading = true
        album.value = await subsonicApi.getAlbumDetails(props.id)

        if (album.value)
          cached.value = await cacheStore.isCached(album.value)
      } finally {
        mainStore.isLoading = false
      }
    },

    playNow = () => {
      if (!album.value)
        return

      const
        currentTrack = playerStore.track,
        isAlbumTrack =
          !!currentTrack && (
            currentTrack.albumId === album.value.id
            || album.value.tracks?.some(t => t.id === currentTrack.id)
          )

      if (isAlbumTrack)
        return playerStore.playPause()

      if (album.value.tracks?.length)
        return playerStore.playNow(album.value.tracks)
    },

    setNextInQueue = () => (
      (album.value)
      ? playerStore.setNextInQueue(album.value.tracks!)
      : undefined
    ),

    addToQueue = () => (
      (album.value)
      ? playerStore.addToQueue(album.value.tracks!)
      : undefined
    ),

    toggleFavourite = async () => (!!album.value && favouriteStore.toggle('album', album.value.id)),

    cacheAlbum = async() => {
      if (!album.value)
        return 

      await cacheStore.cacheAlbum(album.value)
      cached.value = true
    },

    clearAlbumCache = async() => {
      if (!album.value)
        return

      await cacheStore.clearAlbumCache(album.value)
      cached.value = false

      await fetchAlbum()
    },

    shuffleNow = async() => {
      if (!album.value?.tracks?.length)
        return

      await radioStore.shuffleAlbum(album.value.tracks)
    },

    radioNow = async() => {
      if (!album.value?.tracks?.length || !album.value?.artists?.length)
        return

      await radioStore.radioAlbum(album.value.tracks, album.value.artists)
    }

  watch(
    () => [ sort.value, props.id ],
    () => {
      if (props.id) {
        fetchAlbum()
      } else {
        albums.value = []
        hasMoreAlbums.value = true
        fetchAlbums()
      }
    },
    { immediate: true }
  )

  return vine`
    <template v-if="!id">
      <div class="row align-items-center justify-content-space-between">
        <span class="main-title">
          <Icon icon="albums" />
          Albums
        </span>
        <div>
          <select v-model="sort" name="sort" title="Sort by...">
            <option v-for="option in sortOptions" :value="option[0]">{{ option[1] }}</option>
          </select>
        </div>
      </div>

      <AlbumList :items="albums" tile-size="200" />
      <InfiniteLoader :is-loading="mainStore.isLoading" :has-more="hasMoreAlbums" @load-more="fetchAlbums" />
    </template>
  
    <template v-else>
      <Header :image="album.image" :hover="'Play/Pause'" @click="playNow">
        <small class="noselect">Album</small>
        <h1>
          {{ album.name }}
          <template v-if="album.lastFmUrl || album.musicBrainzUrl">
            <a role="button" v-if="album.lastFmUrl" :href="album.lastFmUrl" target="_blank" rel="noopener noreferrer" data-tooltip="Last.fm">
              <Icon icon="lastfm" />
            </a>
            <a role="button" v-if="album.musicBrainzUrl" :href="album.musicBrainzUrl" target="_blank" rel="noopener noreferrer" data-tooltip="MusicBrainz">
              <Icon icon="musicbrainz" />
            </a>
          </template>
        </h1>
        <div class="row align-items-center">
          <div>
            by
            <span v-for="(artist, index) in album.artists" :key="artist.id">
              <span v-if="index > 0">, </span>
              <router-link :to="{name: 'artist', params: { id: artist.id }}">
                {{ artist.name }}
              </router-link>
            </span>
          </div>

          <div v-if="album.year">
            <span class="seperator" />
            {{ album.year }}
          </div>

          <template v-if="album.genres.length">
            <span class="seperator" />
            <span v-for="({ name: genre }, index) in album.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="album.description">
          {{ album.description }}
        </div>

        <div class="row text-nowrap">
          <button class="contrast" @click="playNow">
            <Icon icon="play" /> Play
          </button>

          <button data-tooltip="Shuffle album" @click="shuffleNow">
            <Icon icon="shuffle" />
          </button>

          <button data-tooltip="Album Radio" @click="radioNow">
            <Icon icon="radio" /> 
          </button>

          <button data-tooltip="Favourite album" @click="toggleFavourite">
            <Icon :icon="isFavourite ? 'heart-fill' : 'heart'" />
          </button>

          <OverflowMenu>
            <DropdownItem icon="play" @click="setNextInQueue">
              Next
            </DropdownItem>
            <DropdownItem icon="queue" @click="addToQueue">
              Queue
            </DropdownItem>
            <DropdownItem v-if="!cached" icon="cache" @click="cacheAlbum">
              Cache
            </DropdownItem>
            <DropdownItem v-if="cached" icon="trash" @click="clearAlbumCache">
              Refresh Cache
            </DropdownItem>
          </OverflowMenu>
        </div>
      </Header>
      <TrackList :tracks="album.tracks || []" hide-album hide-cover />
      <EmptyIndicator v-if="!mainStore.isLoading && !album" label="Album not found"/>
    </template>

  `
}