<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, TransactionOrder } 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' }),
        },
        {
          label: () => h('div', {}, t('router_title_module.data_statistic')),
          key: 'Statistic',
          icon: () => h('i', { class: 'iconfont icon-statistics' }),
        },
        {
          label: () => h('div', {}, t('router_title_module.plugin_center')),
          key: 'PluginCenter',
          icon: () => h('i', { class: 'iconfont icon-plugin' }),
        },
      ],
    },
  ]
})

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('router_title_module.order_manage')),
      key: 'OrderManage',
      icon: () => h(TransactionOrder, { 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) || ''
})

/* created */
;(function () {
  if (userStore.isLogin) {
    userStore.fetchUpdateEquityInfo()
  }
})()

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 })
}

function handleNavigateToEquity() {
  router.push({ name: 'Equity' })
}
</script>

<template>
  <div class="flex h-full min-h-[300px] flex-col justify-between overflow-y-auto overflow-x-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>
      <div v-if="userStore.isLogin" class="px-[12px]">
        <div class="flex items-center justify-between">
          <span class="flex-1 overflow-hidden text-nowrap text-[14px]">
            <i class="iconfont icon-gift text-[14px] text-[#000dff]"></i>

            <n-ellipsis>
              <!-- <n-number-animation
                v-if="userStore.equityInfo.points"
                :from="0"
                :to="userStore.equityInfo.points"
                :precision="2"
              /> -->
              <span v-if="userStore.equityInfo.points">{{ userStore.equityInfo.points }}</span>
              <span v-else class="ml-[5px]">-</span>
            </n-ellipsis>
          </span>

          <span
            class="flex cursor-pointer items-center text-[12px] text-[#0B7DFF] transition hover:text-[#085CBB]"
            @click="handleNavigateToEquity"
          >
            <span class="mr-[5px]">
              <n-ellipsis class="!max-w-[80px]"> {{ t('equity_module.more_rights_and_interests') }}</n-ellipsis></span
            >
            <i class="iconfont icon-left rotate-180 text-[12px]"></i>
          </span>
        </div>

        <template v-if="userStore.equityInfo.equityLevel === 'normal'">
          <div
            class="mt-[15px] w-fit rounded-[5px] bg-gradient-to-b from-[#EBEBEB] to-[#CDCDCD] px-[8px] py-[4px] text-[14px] text-[#001C31]"
          >
            {{ userStore.equityLevelName }}
          </div>
        </template>
        <template
          v-else-if="
            userStore.equityInfo.equityLevel === 'professional' || userStore.equityInfo.equityLevel === 'ultimate'
          "
        >
          <div
            class="mt-[15px] w-fit rounded-[5px] px-[8px] py-[4px] text-[14px] text-[#482801]"
            style="background-image: linear-gradient(45deg, #ffdf97, #ffef9b, #ffd493)"
          >
            {{ userStore.equityLevelName }}
          </div>
        </template>
      </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>
  </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>
