import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'

import type { Track } from '../types'

import { formatDuration, formatTitle } from '../utils'
import { useSubsonicApi } from '../subsonicApi'

import { usePlayerStore } from '../store/player'
import { useFavouriteStore } from '../store/favourite'
import { usePlaylistStore } from '../store/playlist'
import { useCacheStore } from '../store/cache'

export const TrackList = ({
  tracks,
  isPlaylistView = false,
  hideAlbum = false,
  hideArtist = false,
  hideDuration = false,
  hideCover = false,
  activeBy = 'id',
}: {
  tracks: Track[],
  isPlaylistView?: boolean,
  hideAlbum?: boolean,
  hideArtist?: boolean,
  hideCover?: boolean,
  hideDuration?: boolean,
  activeBy?: 'id' | 'index',
}) => {
  vineEmits(['remove-track'])

  const
    subsonicApi = useSubsonicApi(),
    playerStore = usePlayerStore(),
    favouriteStore = useFavouriteStore(),
    playlistStore = usePlaylistStore(),
    cacheStore = useCacheStore(),

    playlistSelect = ref<number | null>(null),
    isCached = ref<boolean[]>(tracks.map(track => false)),

    isFavourite = computed<boolean[]>(() => tracks.map(track => !!favouriteStore.tracks[track.id])),
    isPlaying = computed(() => playerStore.isPlaying),
    playingTrackId = computed(() => playerStore.trackId),
    queueIndex = computed(() => playerStore.queueIndex),

    toggleFavourite = (index: number) => {
      if (!tracks[index]?.id)
        return

      favouriteStore.toggle('track', tracks[index].id)
    },

    setNextInQueue = (index: number) => {
      if (!tracks[index])
        return

      playerStore.setNextInQueue([ tracks[index] ])
    },

    addToQueue = (index: number) => {
      if(!tracks[index])
        return

      playerStore.addToQueue([ tracks[index] ])
    },

    addToPlaylist = (playlistId: string) => {
      const index = playlistSelect.value

      if (!index || !tracks[index])
        return

      playlistStore.addTracks(playlistId, [ tracks[index].id ])
      playlistSelect.value = null
    },

    download = (index: number) => {
      if (!tracks[index])
        return

      if (subsonicApi)
        window.location.href = subsonicApi.getDownloadUrl(tracks[index]?.id)
    },

    isActive = (item: Track, index: number) => (
      (activeBy !== 'index')
      ? item.id === playerStore.trackId
      : index === playerStore.queueIndex
    ),

    handlePlay = (index: number) => {
      if (!tracks[index])
        return

      playerStore.setShuffle(false)

      if (tracks[index].id === playerStore.trackId)
        return playerStore.playPause()

      return playerStore.playTrackList(tracks, index)
    },

    cacheHandler = (index: number, e: Event) => {
      const cachedUrl = (e as CustomEvent).detail
      if (cachedUrl === tracks[index]?.url)
        isCached.value[index] = true
    },

    clearHandler = async (index: number) => {
      isCached.value[index] = (!tracks[index]?.url) ? false : (await cacheStore.hasTrack(tracks[index]?.url))
    },

    dragstart = (index, event: DragEvent) => {
      if (!tracks[index])
        return

      if (!tracks[index].isStream)
        event.dataTransfer?.setData('application/x-track-id', tracks[index].id)
    }

  onMounted(() => {
    tracks.forEach((track, index) => {
      window.addEventListener('audioCached', event => cacheHandler(index, event))
      window.addEventListener('audioCacheClearedAll', event => clearHandler(index))
    })
  })

  onUnmounted(() => {
    tracks.forEach((track, index) => {
      window.removeEventListener('audioCached', event => cacheHandler(index, event))
      window.removeEventListener('audioCacheClearedAll', event => clearHandler(index))
    })
  })

  watchEffect(async () => {
    tracks.forEach(async (track, index) => {
      if (!track.url)
        return (isCached.value[index] = false)

      isCached.value[index] = await cacheStore.hasTrack(track.url)
    })
  })

  return vine`
    <div class="scroll">
      <table class="numbered">
        <thead>
          <tr>
            <th>#</th>
            <th>
              Title
            </th>
            <th v-if="!hideArtist" class="hide-mobile">
              Artist
            </th>
            <th v-if="!hideAlbum" class="hide-mobile hide-tablet">
              Album
            </th>
            <th v-if="!hideDuration" class="text-end">
              Time
            </th>
            <th class="text-end">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(track, index) in tracks"
            :key="track.id || index"
            :class="{ active: isActive(track, index) }"
            draggable="true"
            @dragstart="dragstart(track, $event)"
            @click="handlePlay(index)"
          >
            <td>
              <Icon class="icon" :icon="(isActive(track, index) && isPlaying) ? 'waveform' : 'play'" />
              <span class="number">{{ (index + 1) ?? '-' }}</span>
            </td>

            <td class="text-truncate">
              <img
                v-if="!hideCover && track.image"
                :src="track.image"
                loading="lazy"
                class="cover"
              >
              <slot>{{ formatTitle(track.title) }}</slot>
            </td>

            <td v-if="!hideArtist" class="hide-mobile text-truncate">
              <span v-for="(artist, index) in track.artists" :key="artist.id">
                <span v-if="index > 0">, </span>
                <router-link
                  v-if="artist.id"
                  :to="{ name: 'artist', params: { id: artist.id } }"
                  @click.stop
                >
                  {{ artist.name }}
                </router-link>
                <span v-else>
                  {{ artist.name }}
                </span>
              </span>
            </td>

            <td v-if="!hideAlbum" class="hide-mobile hide-tablet text-truncate">
              <template v-if="track.albumId">
                <router-link :to="{ name: 'album', params: { id: track.albumId } }" @click.stop>
                  {{ track.album }}
                </router-link>
              </template>
              <template v-else>
                {{ track.album }}
              </template>
            </td>

            <td v-if="!hideDuration" class="w-fit-content text-end">
              {{ formatDuration(track.duration ?? 0) }}
            </td>

            <td class="row align-items-center justify-content-space-between" @click.stop>
              <Icon
                style="margin-left:.25rem"
                :class="!isCached[index] ? 'invisible' : ''"
                icon="cached"
                data-tooltip="Track available offline"
              />

              <OverflowMenu>
                <DropdownItem v-if="!track.isUnavailable" icon="play" @click="setNextInQueue(index)">
                  Play Next
                </DropdownItem>
                <DropdownItem v-if="!track.isUnavailable" icon="queue" @click="addToQueue(index)">
                  Add to Queue
                </DropdownItem>
                <DropdownItem v-if="!isPlaylistView" icon="playlist-add" @click.stop="playlistSelect = index">
                  Add to Playlist
                </DropdownItem>
                <DropdownItem v-if="!track.isStream" :icon="isFavourite[index] ? 'heart-fill' : 'heart'" @click="toggleFavourite(index)">
                  Favourite
                </DropdownItem>
                <DropdownItem v-if="!track.isStream" icon="download" @click="download(index)">
                  Download
                </DropdownItem>
                <DropdownItem divider />
                <DropdownItem v-if="isPlaylistView" icon="playlist-remove" @click="$emit('remove-track', index)">
                  Remove
                </DropdownItem>
              </OverflowMenu>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <Teleport to="#dialogBoxes">
      <dialog :open="playlistSelect !== null" @click="playlistSelect = null">
        <article class="playlist-select" @click.stop>
          <div v-for="playlist in playlistStore.playlists" :key="'playlistSelect_' + playlist.id" role="button" @click="addToPlaylist(playlist.id)">
            {{ playlist.name }}
          </div>
        </article>
      </dialog>
    </Teleport>
  `
}