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

import { ReplayGainMode } from '../types'
import { useMainStore } from '../store/main'
import { usePlayerStore } from '../store/player'
import { useFavouriteStore } from '../store/favourite'
import { formatDuration, isMobile } from '../utils'

export const Player = () => {
  const
    router = useRouter(),
    route = useRoute(),

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

    playState = ref(0),

    track = computed(() => playerStore.track),
    isRepeat = computed<boolean>(() => playerStore.repeat),
    isPlaying = computed<boolean>(() => playerStore.isPlaying),
    isMuted = computed<boolean>(() => (playerStore.volume <= 0)),
    isShuffle = computed<boolean>(() => playerStore.shuffle),
    isFavourite = computed<boolean>(() => (
      !!track.value && favouriteStore.get('track', track.value.id)
    )),

    replayGainMode = computed<ReplayGainMode>(() => playerStore.replayGainMode),

    documentTitle = computed<string>(() => ([
      track.value?.title,
      track.value?.artists?.map(a => a.name).join(', ') || track.value?.album,
      import.meta.env.VITE_APP_NAME,
    ].filter(Boolean).join(' • '))),

    onBackgroundClick = (e: MouseEvent) => (
      (isMobile())
      ? playerStore.playPause()
      : (
        (route.name !== 'queue')
        ? router.push({ name: 'queue' })
        : router.back()
      )
    ),

    onAlbumClick = () => {
      const t = playerStore.track
      if (!t?.albumId) return

      (route.name === 'album' && String(route.params.id) === String(t.albumId))
      ? router.back()
      : router.push({ name: 'album', params: { id: t.albumId } })
    },

    formatter = (value: number) => (
      `${formatDuration(value)} / ${formatDuration(playerStore.duration)}`
    ),


    playPause = () => playerStore.playPause(),
    back = () => playerStore.back(),
    next = () => playerStore.next(true),
    toggleReplayGain = () => playerStore.toggleReplayGain(),
    toggleRepeat = () => playerStore.toggleRepeat(),
    toggleShuffle = () => playerStore.toggleShuffle(),
    toggleFavourite = () => (
      (track.value) && favouriteStore.toggle('track', track.value.id)
    )

  watch(
    () => playerStore.currentTime,
    currentTime => {
      playState.value = currentTime
    },
    { immediate: true }
  )

  watch(
    documentTitle,
    (value) => {
      document.title = value
    },
    { immediate: true }
  )

  vineStyle.import.scoped('../style/player.css')

  return vine`
    <div class="player" :class="{ blur: mainStore.menuVisible, visible: track }" @click.stop="onBackgroundClick">
      <input
        type="range"
        class="playback-slider"
        v-model="playState"
        :min="0"
        :max="playerStore.duration"
        :step="0.1"
        @click.stop
        @change="event => playerStore.seek(event.target.value)"
      />
      <div class="background">
        <!-- track info -->
        <div v-if="track" class="track-info">
          <img class="cover" :src="track.image" @click.stop="onAlbumClick">
          <div>
            <router-link @click.stop :to="{ name: 'album', params: { id: track.albumId } }">
              {{ track.title }}
            </router-link>
            <div class="color-muted">
              <template
                v-if="track.artists.length"
                v-for="(artist, index) in track.artists"  
                :key="artist.id"
              >
                  <span v-if="index > 0">, </span>
                  <router-link @click.stop :to="{ name: 'artist', params: { id: artist.id } }">
                    {{ artist.name }}
                  </router-link>
              </template>
              <template v-else-if="track.album">
                {{ track.album }}
              </template>
            </div>
          </div>
          <button class="hide-mobile" @click.stop="toggleFavourite" data-tooltip="Favourite">
            <Icon :icon="isFavourite ? 'heart-fill' : 'heart'" />
          </button>
        </div>

        <!-- transport -->
        <div class="transport">
          <button class="hide-mobile" @click.stop="toggleShuffle" data-tooltip="Shuffle">
            <Icon icon="shuffle" :class="{ 'accent-color': isShuffle }" />
          </button>
          <button class="previous" @click.stop="back" data-tooltip="Previous Track">
            <Icon icon="skip" />
          </button>
          <button class="play" @click.stop="playPause" :data-tooltip="isPlaying ? 'Pause' : 'Play'">
            <Icon :icon="isPlaying ? 'pause' : 'play'" />
          </button>
          <button class="next" @click.stop="next" data-tooltip="Next Track">
            <Icon icon="skip" />
          </button>
          <button class="hide-mobile" :class="{ 'accent-color': isRepeat }" @click.stop="toggleRepeat" data-tooltip="Repeat">
            <Icon icon="repeat" />
          </button>
        </div>

        <!-- right controls -->
        <div>
          <button
            v-if="track && track.replayGain"
            data-tooltip="ReplayGain"
            class="hide-mobile"
            :class="{ 'accent-color': replayGainMode !== ReplayGainMode.None }"
            @click.stop="toggleReplayGain"
          >
            <Icon icon="replaygain" :mode="replayGainMode" />
          </button>

          <Dropdown direction="up" @click.stop>
            <template #button>
              <Icon :icon="(!isMuted) ? 'volume' : 'mute'" class="hide-mobile" />
              <Icon icon="more" class="hide-desktop" />
            </template>

            <DropdownItem>
              <input type="range"
                class="volume-slider"
                v-model="playerStore.volume"
                orientation="vertical"
                direction="rtl"
                min="0.0"
                max="1.0"
                step="0.01"
                @change="event => playerStore.setVolume(event.target.value)"
              />
            </DropdownItem>
            <DropdownItem
              role="button"
              class="hide-desktop"
              @click.stop="toggleFavourite"
            >
              <Icon :icon="isFavourite ? 'heart-fill' : 'heart'" class="margin-auto" />
            </DropdownItem>

            <DropdownItem
              v-if="track && track.replayGain"
              role="button"
              data-tooltip="ReplayGain"
              class="hide-desktop"
              :class="{ 'accent-color': replayGainMode !== ReplayGainMode.None }"
              @click.stop="toggleReplayGain"
            >
              <Icon icon="replaygain" :mode="replayGainMode" />
            </DropdownItem>
            <DropdownItem
              role="button"
              class="hide-desktop"
              data-tooltip="Shuffle"
              @click.stop="toggleShuffle"
            >
              <Icon icon="shuffle" :class="{ 'accent-color': isShuffle }" />
            </DropdownItem>
            <DropdownItem
              role="button"
              class="hide-desktop"
              data-tooltip="Repeat"
              @click.stop="toggleRepeat"
            >
              <Icon icon="repeat" :class="{ 'accent-color': isRepeat }" />
            </DropdownItem>
            <DropdownItem
              role="button"
              class="hide-desktop"
              data-tooltip="Favourite"
              @click.stop="toggleFavourite"
            >
              <Icon :icon="isFavourite ? 'heart-fill' : 'heart'" />
            </DropdownItem>
          </Dropdown>
        </div>
      </div>
    </div>
  `
}