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

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 = shallowReadonly<MenuOption[]>([
  {
    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' }),
  },
])

const avatarOptions = readonly([
  {
    label: () => h('div', {}, t('common_module.logout')),
    key: 'logout',
    icon: () => h(CustomIcon, { icon: 'teenyicons:logout-solid' }),
  },
])

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

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

function handleDropdownSelect(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="mx-auto flex h-[50px] w-full shrink-0 bg-[url('@/assets/images/page-logo.png')] bg-contain bg-center bg-no-repeat"
      />

      <div class="px-3 py-5">
        <button
          class="bg-theme-color hover:bg-hover-theme-color flex h-[40px] w-[203px] items-center justify-center rounded-md text-white outline-none"
          @click="handleToPersonAppSettingPage"
        >
          <Plus theme="outline" size="16" fill="#fff" :stroke-width="4" />
          <span class="ml-[5px]">{{ t('common_module.create_agent_btn_text') }}</span>
        </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="my-7 px-3">
      <NDropdown
        v-if="userStore.isLogin"
        trigger="click"
        placement="top-start"
        :options="avatarOptions"
        @select="handleDropdownSelect"
      >
        <div class="flex h-full cursor-pointer items-center">
          <NAvatar round :size="40" object-fit="cover" :src="userStore.userInfo.avatarUrl || defaultAvatar" />

          <div class="ml-3 line-clamp-1 max-w-[140px] select-none break-all text-base">
            {{ userStore.userInfo.nickName || t('common_module.not_login_text') }}
          </div>
        </div>
      </NDropdown>

      <div v-else>
        <NButton type="primary" class="w-full! rounded-md!" @click="handleToLogin">
          {{ t('common_module.login_now') }}
        </NButton>
      </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>
