<script setup lang="ts">
  import { useAppStore } from '@/store'
  import { cloneDeep } from 'lodash'
  import type { AdapterInfo } from '~/interfaces/plugin'
  import { PluginStatus } from '~/interfaces/plugin'
  import { message } from '@/utils'

  const appStore = useAppStore()

  const loading = ref(true)

  const totalPlugins = computed(() => appStore.totalPlugins)

  const pluginStatusUpdate = (
    _e: any,
    _plugin: AdapterInfo,
    status: PluginStatus | undefined,
    msg?: any,
  ) => {
    const plugin = totalPlugins.value?.find((p) => p.name === _plugin.name)
    if (!plugin || !plugin.local) return
    switch (status) {
      case PluginStatus.INSTALLING_COMPLETE:
        message(`插件 ${plugin.pluginName} 安装完成!`, { type: 'success' })
        setTimeout(() => {
          appStore.getLocalPlugins()
        }, 50)
        break
      case PluginStatus.INSTALL_FAIL:
        message(`插件 ${plugin.pluginName} 安装失败!`, { type: 'error' })
        status = undefined
        break
      case PluginStatus.UNINSTALL_COMPLETE:
        message(`插件 ${plugin.pluginName} 卸载完成!`, { type: 'success' })
        status = undefined
        appStore.getLocalPlugins()
        break
      case PluginStatus.UNINSTALL_FAIL:
        message(`插件 ${plugin.pluginName} 卸载失败!`, { type: 'error' })
        status = PluginStatus.INSTALLING_COMPLETE
        break
    }
    msg && message(`信息：${msg}`)
    plugin.local.status = status
  }

  onMounted(() => {
    appStore
      .getTotalPlugins()
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        //
      })
    window.ipcRenderer.on('plugin-status-update', pluginStatusUpdate)
  })

  onUnmounted(() => {
    window.ipcRenderer.off('plugin-status-update', pluginStatusUpdate)
  })

  const install = (plugin: AdapterInfo) => {
    window.ipcRenderer.invoke('plugin-install', cloneDeep(plugin))
  }

  const uninstall = (plugin: AdapterInfo) => {
    window.ipcRenderer.invoke('plugin-uninstall', cloneDeep(plugin))
  }
</script>

<template>
  <div class="!bg-$color-neutral-2 p-2">
    <a-list :loading="loading" :data="totalPlugins" size="small">
      <template #item="{ item }">
        <a-list-item :key="item.name">
          <a-list-item-meta>
            <template #title>
              <span class="mr-1 align-middle">{{ item.pluginName }}</span>
              <a-tag size="small">v{{ item.version }}</a-tag>
            </template>
            <template #description>
              <div class="text-xs">
                {{ item.description }}
                <br />
                {{ item.author }}
              </div>
            </template>
          </a-list-item-meta>
          <template #actions>
            <div class="ml-2 flex flex-col gap-1">
              <template v-if="item.local.status === PluginStatus.UPGRADE">
                <a-button @click="install(item)">升级</a-button>
              </template>
              <template v-if="!item.local.status">
                <a-button @click="install(item)">安装</a-button>
              </template>
              <template v-else-if="item.local.status === PluginStatus.INSTALLING">
                <a-button disabled>安装中...</a-button>
              </template>
              <template
                v-else-if="
                  item.local.status === PluginStatus.INSTALLING_COMPLETE ||
                  item.local.status === PluginStatus.UPGRADE
                "
              >
                <a-button @click="uninstall(item)">卸载</a-button>
              </template>
              <template v-else-if="item.local.status === PluginStatus.UNINSTALLING">
                <a-button disabled>卸载中...</a-button>
              </template>
            </div>
          </template>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<style lang="less" scoped>
  :deep(.arco-list) {
    background: var(--color-bg-2);
  }
</style>
