<script lang="ts" setup>
import { computed, ref, toRef, unref } from 'vue'

// import { useGlobSetting } from '@/hooks/setting'
import { AppstoreOutlined } from '@ant-design/icons-vue'
import { Drawer, Flex } from 'ant-design-vue'
import { primaryColor } from '../../../../build/config/themeConfig'
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
import { useDesign } from '@/hooks/web/useDesign'
import { useSplitMenu } from '@/layouts/default/menu/useLayoutMenu'
import { propTypes } from '@/utils/propTypes'
import type { MenuModeEnum } from '@/enums/menuEnum'
import { MenuSplitTyeEnum } from '@/enums/menuEnum'
import { Icon } from '@/components/Icon'
import { useGo } from '@/hooks/web/usePage'
import { useI18n } from '@/hooks/web/useI18n'
import type { Menu } from '@/router/types'

// import { PageEnum } from '@/enums/pageEnum'

const props = defineProps({
  theme: propTypes.oneOf(['light', 'dark']),

  splitType: {
    type: Number as PropType<MenuSplitTyeEnum>,
    default: MenuSplitTyeEnum.NONE,
  },

  isHorizontal: propTypes.bool,
  // menu Mode
  menuMode: {
    type: [String] as PropType<Nullable<MenuModeEnum>>,
    default: '',
  },
})

const { prefixCls } = useDesign('app-logo')
const { getCollapsedShowTitle } = useMenuSetting()
// const { title } = useGlobSetting()
const go = useGo()
const { t } = useI18n()

const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }])

const open = ref<boolean>(false)

const { menusRef } = useSplitMenu(toRef(props, 'splitType'))

function getMenuTitle(title: string | undefined) {
  if (!title)
    return ''

  if (title.includes('.'))
    return t(title)

  return title
}

function handleNavTo(item: Menu) {
  function getDeepestPath(menu: Menu): string {
    if (menu.children && menu.children.length > 0)
      return getDeepestPath(menu.children[0])

    return menu.path
  }

  const targetPath = getDeepestPath(item)
  go(targetPath)
  open.value = !open.value
}
</script>

<template>
  <div class="anticon" :class="getAppLogoClass">
    <div>
      <div class="h-full w-full rounded p-2 transition-all hover:bg-gray-200 dark:hover:bg-gray-700" :style="{ color: primaryColor }">
        <AppstoreOutlined class="font-size-5" @click="open = !open" />

        <Drawer v-model:open="open" placement="left" width="40%" class="mt-48px" :mask-style="{ opacity: 0 }" :closable="false">
          <Flex wrap="wrap" gap="small">
            <div v-for="(item) in menusRef" :key="item.path" @click="handleNavTo(item)">
              <div v-if="!item.hideMenu" class="flex flex-col items-center justify-center">
                <div class="m-2 aspect-ratio-square h-14 w-14 flex flex-row items-center justify-center rounded-md p-2" :style="{ backgroundColor: primaryColor }">
                  <Icon :icon="item.icon" :size="20" color="white" />
                </div>
                <span>{{ getMenuTitle(item.meta?.title) }}</span>
              </div>
            </div>
          </Flex>
        </Drawer>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

</style>
