<script setup lang='ts'>
import type { IMusic } from '@/types/storeType'
import localforage from 'localforage'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PageHeader from '@/components/PageHeader/index.vue'
import useStore from '@/store'
import { readFileData } from '@/utils/file'

const { t } = useI18n()
const audioUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
const audioDbStore = localforage.createInstance({
  name: 'audioStore',
})
const globalConfig = useStore().globalConfig

const { getMusicList: localMusicList } = storeToRefs(globalConfig)
const limitType = ref('audio/*')
const localMusicListValue = ref(localMusicList)
async function play(item: IMusic) {
  globalConfig.setCurrentMusic(item, false)
}

function deleteMusic(item: IMusic) {
  globalConfig.removeMusic(item.id)
  audioDbStore.removeItem(item.name)
  // setTimeout(()=>{
  //     localMusicListValue.value=localMusicList
  // },100)
}
function resetMusic() {
  globalConfig.resetMusicList()
  audioDbStore.clear()
}
function deleteAll() {
  globalConfig.clearMusicList()
  audioDbStore.clear()
}
async function getMusicDbStore() {
  const keys = await audioDbStore.keys()
  if (keys.length > 0) {
    audioDbStore.iterate((value: string, key: string) => {
      globalConfig.addMusic({
        id: key + new Date().getTime().toString(),
        name: key,
        url: 'Storage',
      })
    })
  }
}
async function handleFileChange(e: Event) {
  const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
  if (!isAudio) {
    audioUploadToast.value = 3

    return
  }
  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
  audioDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
    .then(() => {
      audioUploadToast.value = 1
      getMusicDbStore()
    })
    .catch(() => {
      audioUploadToast.value = 2
    })
}

onMounted(() => {
  getMusicDbStore()
})
</script>

<template>
  <div>
    <PageHeader title="音乐管理">
      <template #buttons>
        <div class="flex gap-3">
          <button class="btn btn-primary btn-sm" @click="resetMusic">
            {{ t('button.reset') }}
          </button>
          <label for="explore">
            <input
              id="explore" type="file" class="" style="display: none" :accept="limitType"
              @change="handleFileChange"
            >
            <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
          </label>
          <button class="btn btn-error btn-sm" @click="deleteAll">
            {{ t('button.allDelete') }}
          </button>
        </div>
      </template>
    </PageHeader>

    <div>
      <ul class="p-0">
        <li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3">
          <div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis" :title="item.name">
            <a class="link hover:text-primary">{{ item.name }}</a>
          </div>
          <div class="flex gap-3">
            <button class="btn btn-primary btn-xs" @click="play(item)">
              {{ t('button.play') }}
            </button>
            <button class="btn btn-error btn-xs" @click="deleteMusic(item)">
              {{ t('button.delete') }}
            </button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang='scss' scoped></style>
