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

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

import { useMainStore } from '../store/main'
import { usePlaylistStore } from '../store/playlist'

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

export const PlaylistsView = () => {
  const
    mainStore = useMainStore(),
    playlistStore = usePlaylistStore(),

    showAddModal = ref(false),
    editingPlaylist = ref<Playlist | null>(null),
    confirmDialog = ref<ConfirmDialogExpose | null>(null),

    playlists = ref<Playlist[]>([]),

    closeModal = () => {
      editingPlaylist.value = null
      showAddModal.value = false
    },
    startCreate = () => {
      editingPlaylist.value = null
      showAddModal.value = true
    },
    openEditPlaylist = (playlist: Playlist) => {
      editingPlaylist.value = playlist
      showAddModal.value = true
    },

    createPlaylist = async (name: string) => {
      await playlistStore.create(name)
      closeModal()
    },
    updatePlaylist = async (playlist: Playlist) => {
      await playlistStore.update(playlist)
      closeModal()
    },
    deletePlaylist = async (id: string) => {
      if (!confirmDialog.value)
        return

      const userConfirmed = await confirmDialog.value.open(
        'Remove Playlist',
        'Do you really want to remove the playlist?'
      )

      if (!userConfirmed)
        return

      await playlistStore.delete(id)
    }

  watch(
    playlistStore,
    async () => {
      mainStore.isLoading = true
      playlists.value = playlistStore.playlists
      mainStore.isLoading = false
    },
    { deep: true, immediate: true }
  )

  return vine`
    <div class="row align-items-center justify-content-space-between">
      <span class="main-title">
        <Icon icon="playlist" />
        Playlists
      </span>
      <button variant="link" class="mx-2" @click="startCreate">
        <Icon icon="plus" />
        Create Playlist
      </button>
    </div>

    <PlaylistList
      v-if="playlists.length"
      :items="playlists"
      :is-playlist-view="true"
      @edit-playlist="openEditPlaylist"
      @remove-playlist="deletePlaylist"
    />

    <EmptyIndicator  v-if="!mainStore.isLoading && playlists.length === 0" />

    <Teleport to="#dialogBoxes">
      <ConfirmDialog ref="confirmDialog" />
      <EditPlaylistModal
        v-if="showAddModal"
        :playlist="editingPlaylist"
        :mode="editingPlaylist ? 'edit' : 'create'"
        @create-playlist="createPlaylist"
        @update-playlist="updatePlaylist"
        @close="closeModal"
      />
    </Teleport>
  `
}