<script setup lang="ts">
import { h, readonly, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Plus, ApplicationTwo, NotebookOne, DatabaseSetting } from '@icon-park/vue-next'
import CreateKnowledgeModal, {
  KnowledgeFormDataInterface,
} from './personal-knowledge/components/create-knowledge-modal.vue'
import CreateDatabaseModal from './personal-database/components/create-database-modal.vue'
import { fetchCreateKnowledge } from '@/apis/knowledge'
import { fetchCreateDataBase } from '@/apis/database'
import { DatabaseFormInterface, DatabaseItemInterface } from './personal-database/type'

const { t } = useI18n()

const currentRoute = useRoute()
const router = useRouter()

const routerNameValue = ref(currentRoute.name)

const personalSpaceModuleList = [
  {
    routeName: 'PersonalSpaceApp',
    label: 'common_module.agent',
  },
  {
    routeName: 'PersonalSpaceKnowledge',
    label: 'common_module.knowledge',
  },
  {
    routeName: 'PersonalSpaceDatabase',
    label: 'common_module.database',
  },
]

const addPersonalSpaceOptions = readonly([
  {
    label: () => h('span', {}, t('common_module.agent')),
    key: 'addAgent',

    icon: () => h(ApplicationTwo, { theme: 'outline', size: 16, fill: '#333' }),
  },
  {
    label: () => h('span', {}, t('common_module.knowledge')),
    key: 'addKnowledge',
    icon: () => h(NotebookOne, { theme: 'outline', size: 16, fill: '#333' }),
  },
  {
    label: () => h('span', {}, t('common_module.database')),
    key: 'addDatabase',
    icon: () => h(DatabaseSetting, { theme: 'outline', size: 16, fill: '#333' }),
  },
])

const showCreateKnowledgeModal = ref(false)
const createKnowledgeBtnLoading = ref(false)

const showCreateDatabaseModal = ref(false)
const createDatabaseBtnLoading = ref(false)

watch(
  () => currentRoute.fullPath,
  () => {
    routerNameValue.value = currentRoute.name
  },
)

function handleChangeRoute(routeName: string) {
  router.replace({ name: routeName })
}

function handleSelectAddType(type: string) {
  switch (type) {
    case 'addAgent':
      router.push({ name: 'PersonalAppSetting' })
      break
    case 'addKnowledge':
      showCreateKnowledgeModal.value = true
      break
    case 'addDatabase':
      showCreateDatabaseModal.value = true
      break
  }
}

async function handleCreateKnowledgeNextStep(createKnowledgeData: KnowledgeFormDataInterface) {
  createKnowledgeBtnLoading.value = true

  const res = await fetchCreateKnowledge<{ id: number }>({
    knowledgeName: createKnowledgeData.knowledgeName,
    desc: createKnowledgeData.knowledgeDesc,
    knowledgeType: createKnowledgeData.knowledgeType,
  }).finally(() => {
    createKnowledgeBtnLoading.value = false
  })

  if (res.code === 0) {
    router.push({
      name: 'UploadKnowledge',
      params: {
        id: res.data.id,
        type: createKnowledgeData.knowledgeType + '-' + createKnowledgeData.knowledgeImportType,
      },
    })
    showCreateKnowledgeModal.value = false
  }
}

async function handleCreateDatabase(databaseData: DatabaseFormInterface) {
  createDatabaseBtnLoading.value = true

  const res = await fetchCreateDataBase<DatabaseItemInterface>(databaseData).finally(() => {
    createDatabaseBtnLoading.value = false
  })

  if (res.code === 0) {
    showCreateDatabaseModal.value = false
    router.push({ name: 'PersonalSpaceDBTable', params: { id: res.data.id } })
  }
}
</script>

<template>
  <div class="flex h-full flex-col rounded-[20px] bg-white p-6 shadow-[0_2px_2px_#0000000a]">
    <div class="flex justify-between">
      <div class="flex flex-col">
        <div class="mb-6 flex items-center">
          <img src="@/assets/images/personal-icon.png" />
          <p class="ml-[5px] text-lg">{{ t('personal_space_module.title') }}</p>
        </div>

        <ul class="mb-4 flex">
          <li
            v-for="personalSpaceModuleItem in personalSpaceModuleList"
            :key="personalSpaceModuleItem.routeName"
            class="rounded-theme hover:bg-active-color hover:text-font-color ml-2.5 h-8 cursor-pointer select-none px-[14px] leading-8 transition-colors duration-300 first:ml-0"
            :class="[
              routerNameValue === personalSpaceModuleItem.routeName
                ? 'text-font-color bg-active-color'
                : 'text-gray-font-color border-transparent',
            ]"
            @click="handleChangeRoute(personalSpaceModuleItem.routeName)"
          >
            {{ t(personalSpaceModuleItem.label) }}
          </li>
        </ul>
      </div>

      <div>
        <NDropdown trigger="hover" :options="addPersonalSpaceOptions" @select="handleSelectAddType">
          <NButton type="primary" :bordered="false" :focusable="false" class="min-w-[75px]!">
            <Plus theme="outline" size="20" fill="#fff" :stroke-width="3" />
            <span class="ml-1 text-sm">{{ t('personal_space_module.create_btn_text') }}</span>
          </NButton>
        </NDropdown>
      </div>
    </div>

    <div class="h-full overflow-hidden">
      <RouterView v-slot="{ Component }">
        <Transition appear name="fade-slide" mode="out-in">
          <Component :is="Component" />
        </Transition>
      </RouterView>
    </div>

    <CreateKnowledgeModal
      v-model:is-show-modal="showCreateKnowledgeModal"
      :btn-loading="createKnowledgeBtnLoading"
      @confirm="handleCreateKnowledgeNextStep"
    />

    <CreateDatabaseModal
      v-model:show-modal="showCreateDatabaseModal"
      :btn-loading="createDatabaseBtnLoading"
      @confirm="handleCreateDatabase"
    />
  </div>
</template>

<style lang="scss" scoped>
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
