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

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

import { useSubsonicApi } from '../subsonicApi'
import { useMainStore } from '../store/main'
import { usePlayerStore } from '../store/player'
import { usePlaylistStore } from '../store/playlist'

import { formatDuration, formatBytes } from '../utils'

import { EditPlaylistModal } from '../components/EditPlaylistModal.vine'
import { TrackList } from '../components/TrackList.vine'
import { 
  type ConfirmDialogExpose,
  ConfirmDialog
} from '../components/ConfirmDialog.vine'

export const PlaylistView = ({ id }: { id: string }) => {
  const
    router = useRouter(),
    route = useRoute(),
    subsonicApi = useSubsonicApi(),

    mainStore = useMainStore(),
    playlistStore = usePlaylistStore(),
    playerStore = usePlayerStore(),

    playlist = ref<Playlist | null>(null),
    showEditModal = ref<boolean>(false),
    confirmDialog = ref<ConfirmDialogExpose | null>(null),

    fetchPlaylist = async () => {
      try {
        mainStore.isLoading = true
        playlist.value = await subsonicApi.getPlaylist(id)
      } catch (err) {
        console.error(err)
      } finally {
        mainStore.isLoading = false
      }
    },

    playNow = () => {
      if (!playlist.value?.tracks?.length)
        return

      const currentTrack = playerStore.track

      if (
        currentTrack && (
          playlist.value.tracks.some(
            (t: Track) => t.id === currentTrack.id
          )
        )
      ) return playerStore.playPause()

      return playerStore.playNow(playlist.value.tracks)
    },

    shuffleNow = () => {
      if (!playlist.value?.tracks)
        return

      playerStore.shuffleNow(playlist.value.tracks)
      nextTick(() => router.push({ name: 'queue' }))
    },

    removeTrack = (index: number) => {
      if (!playlist.value?.tracks)
        return

      playlist.value.tracks.splice(index, 1)
      return playlistStore.removeTrack(id, index)
    },

    deletePlaylist = async() => {
      if (!playlist.value || !confirmDialog.value)
        return

      const userConfirmed = await confirmDialog.value.open(
        'Delete Playlist',
        `Do you really want to delete the playlist "${playlist.value.name}"?`
      )

      if (!userConfirmed) return
      await playlistStore.delete(id)
      router.replace({ name: 'playlists' })
    },

    openEditModal = () => {
      showEditModal.value = true
    },

    applyPlaylistUpdate = (updated: Playlist) => {
      playlist.value = { ...playlist.value, ...updated }
      playlistStore.update(playlist.value)
    },

    calcPlaylistSize = (): number => (
      (!playlist.value?.tracks)
      ? 0
      : (playlist.value.tracks.reduce(
        (prev, cur) => prev + cur.size,
        0
      ))
    )

  watch(
    () => id,
    fetchPlaylist,
    { immediate: true }
  )

  return vine`
    <template v-if="playlist">
      <Header :image="playlist.image" :hover="'Play/Pause'" @click="playNow">
        <small class="noselect">Playlist</small>
        <h1>{{ playlist.name }}</h1>

        <div v-if="playlist.owner" class="row align-items-center">
          <span class="bold">
            by {{ playlist.owner }}
          </span>
          <span class="badge" v-if="playlist.isPublic">
            <Icon icon="globe" class="xsmall" />
            Public
          </span>
        </div>

        <div class="scroll" v-if="playlist.comment">
          {{ playlist.comment }}
        </div>

        <div class="row flex-wrap align-items-center">
          <span><strong>{{ playlist.trackCount }}</strong> tracks</span>
          <span class="seperator" />
          <strong>{{ formatDuration(playlist.duration) }}</strong>
          <span class="seperator" />
          <strong>{{ formatBytes(calcPlaylistSize()) }}</strong>
        </div>

        <div class="row align-items-center">
          <button class="contrast" :disabled="playlist.tracks.length === 0" @click="playNow()">
            <Icon icon="play" /> Play
          </button>
          <button :disabled="playlist.tracks.length === 0" data-tooltip="Shuffle" @click="shuffleNow()">
            <Icon icon="shuffle" />
          </button>
          <OverflowMenu @click.stop>
            <DropdownItem :disabled="playlist.isReadOnly" icon="edit" @click="openEditModal">
              Edit
            </DropdownItem>
            <DropdownItem divider />
            <DropdownItem :disabled="playlist.isReadOnly" icon="trash" @click="deletePlaylist">
              Delete
            </DropdownItem>
          </OverflowMenu>
        </div>
      </Header>

      <TrackList
        v-if="playlist.tracks.length > 0"
        :tracks="playlist.tracks"
        :is-playlist-view="true"
        @remove-track="removeTrack"
      >
        <template #context-menu="{ index }">
          <DropdownItem divider />
          <DropdownItem
            icon="trash"
            variant="danger"
            @click="removeTrack(index)"
          >
            Remove
          </DropdownItem>
        </template>
      </TrackList>

      <EmptyIndicator v-else-if="!isLoading" />
    </template>

    <Teleport to="#dialogBoxes">
      <ConfirmDialog ref="confirmDialog" />
      <EditPlaylistModal
        v-if="showEditModal"
        :playlist="playlist"
        @update-playlist="applyPlaylistUpdate"
        @close="showEditModal = false"
      />
    </Teleport>
  `
}