<script setup lang="ts">
import { h, readonly, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Plus } from '@icon-park/vue-next'
import { sidebarMenus } from '@/router/index'
import { type MenuOption } from '@/router/utils'
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 menuValue = ref(currentRoute.meta.belong)

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

const avatarOptions = readonly([
  // {
  //   label: '我的',
  //   key: 'My',
  //   icon: () => h(CustomIcon, { icon: 'bx:user' }),
  // },
  {
    label: () => h('div', {}, t('sidebar_module.dropdown_module.logout')),
    key: 'logout',
    icon: () => h(CustomIcon, { icon: 'teenyicons:logout-solid' }),
  },
])

watch(
  () => currentRoute.fullPath,
  () => {
    menuValue.value = currentRoute.meta.belong
  },
)

function handleUpdateValue(_key: string, menuItemOption: MenuOption) {
  router.push({ name: menuItemOption.routeName })
}

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) },
  })
}
</script>

<template>
  <div class="flex h-full flex-col justify-between">
    <div>
      <div
        class="mx-auto flex h-[50px] w-full 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('sidebar_module.create_application_btn_text') }}</span>
        </button>
      </div>

      <ul class="px-3">
        <li
          v-for="sidebarMenuItem in sidebarMenus"
          :key="sidebarMenuItem.key"
          class="hover:bg-active-color my-1 flex h-10 cursor-pointer items-center rounded-md pl-3"
          :class="[menuValue === sidebarMenuItem.routeName ? 'bg-active-color text-theme-color' : 'text-font-color']"
          @click="handleUpdateValue(sidebarMenuItem.routeName, sidebarMenuItem)"
        >
          <CustomIcon :icon="sidebarMenuItem.icon" class="mr-2 text-base" />
          <span class="line-clamp-1 max-w-[150px]">{{ t(sidebarMenuItem.label) }}</span>
        </li>
      </ul>
    </div>

    <div class="mb-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('sidebar_module.not_login_text') }}
          </div>
        </div>
      </NDropdown>

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