<script setup lang="ts">
import { computed, h, ref, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Plus, Logout, Me } from '@icon-park/vue-next'
import type { MenuOption } from 'naive-ui'
import { useUserStore } from '@/store/modules/user'
// import LanguageSetting from '@/components/language-setting/language-setting.vue'

const { t } = useI18n()

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

const userStore = useUserStore()

const defaultAvatar = 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'

const currentMenuValue = ref('')

const menuOptions = computed<MenuOption[]>(() => {
  return [
    {
      label: () => h('div', {}, t('router_title_module.home')),
      key: 'Home',
      icon: () => h('i', { class: 'iconfont icon-home' }),
    },
    {
      label: () => h('div', {}, t('router_title_module.personal')),
      key: 'PersonalSpace',
      icon: () => h('i', { class: 'iconfont icon-personal' }),
    },
    {
      type: 'group',
      label: () => h('div', {}, t('router_title_module.explore')),
      key: 'Dialogue',
      children: [
        {
          label: () => h('div', {}, t('router_title_module.application_square')),
          key: 'ApplicationsSquare',
          icon: () => h('i', { class: 'iconfont icon-square' }),
        },
      ],
    },
  ]
})

const userConfigOptions = computed(() => {
  return [
    {
      label: () => h('div', t('personal_settings_module.personal_settings_title')),
      key: 'PersonalSettings',
      icon: () => h(Me, { theme: 'outline', size: 14, strokeWidth: 3 }),
    },
    {
      label: () => h('div', t('common_module.logout')),
      key: 'Logout',
      icon: () => h(Logout, { theme: 'outline', size: 14, strokeWidth: 3 }),
    },
  ]
})

watchEffect(() => {
  currentMenuValue.value = (currentRoute.meta.belong as string) || ''
})

function handleToPersonAppSettingPage() {
  router.push({ name: 'PersonalAppSetting' })
}

function handleUserConfigOptionsSelect(key: string) {
  if (key === 'Logout') {
    userStore.logout().then(() => {
      router.push({ name: 'Login' })
    })
    return
  }

  router.replace({ name: key })
}

function handleToLogin() {
  router.push({
    name: 'Login',
    query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) },
  })
}

function handleMenuValueChange(key: string) {
  router.push({ name: key })
}
</script>

<template>
  <div class="flex h-full flex-col justify-between overflow-hidden">
    <div class="flex flex-1 flex-col overflow-hidden">
      <div class="bg-svg-page_logo mx-auto flex h-[50px] w-full shrink-0 bg-contain bg-center bg-no-repeat" />

      <div class="px-3 py-5">
        <n-button
          type="primary"
          class="h-[40px]! w-[203px]! rounded-theme!"
          :bordered="false"
          @click="handleToPersonAppSettingPage"
        >
          <Plus theme="outline" size="20" fill="#fff" :stroke-width="3" />
          <span class="ml-[5px]">{{ t('common_module.create_agent_btn_text') }}</span>
        </n-button>
      </div>

      <n-scrollbar>
        <div class="px-1">
          <n-menu
            :value="currentMenuValue"
            :options="menuOptions"
            :root-indent="18"
            :indent="0"
            :on-update:value="handleMenuValueChange"
          />
        </div>
      </n-scrollbar>
    </div>

    <div class="mb-[20px] mt-6">
      <div>
        <n-dropdown
          v-if="userStore.isLogin"
          trigger="click"
          placement="top"
          :options="userConfigOptions"
          @select="handleUserConfigOptionsSelect"
        >
          <div
            class="flex h-full cursor-pointer items-center rounded-[6px] px-[12px] py-[4px] transition hover:bg-[#F3F3F5]"
          >
            <n-avatar round :size="40" object-fit="cover" :src="userStore.userInfo.avatarUrl || defaultAvatar" />

            <div class="ml-3 max-w-[140px] flex-1 select-none break-all text-base">
              <n-ellipsis :tooltip="{ placement: 'top', width: 220 }">
                {{ userStore.userInfo.nickName || t('common_module.not_login_text') }}
              </n-ellipsis>
            </div>
          </div>
        </n-dropdown>

        <div v-else>
          <n-button type="primary" class="w-full! rounded-md!" @click="handleToLogin">
            {{ t('common_module.login_now') }}
          </n-button>
        </div>
      </div>

      <!-- <div class="mt-[10px]">
        <LanguageSetting arrow-direction="top" />
      </div> -->
    </div>
  </div>
</template>

<style lang="scss">
// .v-binder-follower-container {
//   .n-dropdown-menu {
//     --n-border-radius: 10px !important;
//     --n-box-shadow: -3px 3px 4px 0px #f2f2f2 !important;

//     padding: 6px 0 !important;
//   }

//   .n-dropdown-menu .n-dropdown-option-body {
//     padding: 0 10px;
//   }
// }
</style>
