<template>
  <div class="setting">
    <h1>设置</h1>
    <p>管理您的音乐库和系统配置</p>
    <p class="controll-buttons">
      <button type="submit" @click="show = true">添加</button>
      <button @click="butterfliu.fetchLibraries()">刷新</button>
    </p>

    <AddLibraryDialog v-model="show" @confirm="toAddLibrary" />

    <div>
      <LibraryCard
        v-for="l in libraries"
        :key="l.id"
        :name="l.name"
        :id="l.id"
        @scan="toScanLibrary(l.id)"
        @delete="toDeleteLibrary(l.id)"
        @viewSongs="toViewSongs(l.id)"
      />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import AddLibraryDialog from '@/components/AddLibraryDialog.vue'
import LibraryCard from '@/components/LibraryCard.vue'
import { useButterfliuStore } from '@/stores/butterfliu'
import { ref, computed } from 'vue'

const router = useRouter()
const butterfliu = useButterfliuStore()
butterfliu.fetchLibraries()
const libraries = computed(() => butterfliu.libraries)
const show = ref(false)

function toAddLibrary(name, path) {
  butterfliu.addLibrary(name, path).then(() => butterfliu.fetchLibraries())
}

function toScanLibrary(id) {
  butterfliu.scanLibrary(id)
}

function toDeleteLibrary(id) {
  butterfliu.deleteLibrary(id).then(() => butterfliu.fetchLibraries())
}

function toViewSongs(id) {
  router.push({ name: 'music-library', params: { id } })
}
</script>

<style scoped>
.setting {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

.controll-buttons {
  display: flex;
  gap: var(--size-2);
}
</style>
