import {
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElScrollbar,
  ElSubMenu,
  type MenuInstance,
  type MenuItemRegistered,
} from 'element-plus'
import AIcon from '@/components/a-icon/AIcon.vue'
import type { IconName } from '@/components/a-icon/iconfont.ts'
import styles from '@/pages/a-frame/aaside.module.styl'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
import Colls from '@/common/utils/colls.ts'
import { MenuCategory } from '@/common/app/constants.ts'
import { computed } from 'vue'
import Nav from '@/common/router/nav.ts'
import logo from '@/assets/images/zsy.png'
import { useAppPageStore } from '@/common/app/app-page-store.ts'
import { appTitle } from '@/common'

export interface Menu extends G.TreeNode {
  // Id
  id: string;
  // 编码
  sn: string;
  // 上级 Id; 层级为 1 的节点值为 0
  pid: string;
  // 菜单名称
  title: string;
  // 图标
  icon: string;
  // 层级; >= 1
  tier: number;
  // 排序
  sort: number;
  // 路由名称
  routeName: string;
  // 面包路径
  breadcrumb: string[];
  // 类型
  menuCategory: 'Catalog' | 'Group' | 'Page' | 'SubPage' | 'Btn';
  // 子菜单
  children?: Menu[];
}

export default defineComponent(
  (props) => {
    const appSettingStore = useAppSettingStore()
    const menuIns = useTemplateRef<MenuInstance>('menu')

    const appPageStore = useAppPageStore()

    watch(
      () => appPageStore.currentPage.menuId,
      () => {
        menuIns.value?.updateActiveIndex(appPageStore.currentPage.menuId)
      })

    const menuTree = computed(() => {
      return Colls.toTree(appSettingStore.menus.filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog).sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)))
    })

    const onMenuClick = (menuItem: MenuItemRegistered) => {
      const menu = appSettingStore.menus.find(it => it.id === menuItem.index)
      Nav.open(menu?.routeName ?? '')
    }
    const renderMenu = (it: Menu) => {
      let renderChildNode: (() => VNode[] | undefined) | undefined = undefined
      if (it.children != null && it.children.length > 0) {
        renderChildNode = () => it.children?.map(renderMenu)
      }
      let currentNode: VNode
      switch (it.menuCategory) {
        case 'Catalog': {
          currentNode = (
            <ElSubMenu index={it.id}>
              {{
                title: () => (
                  <>
                    <AIcon class={styles.aIcon} name={it.icon as IconName}/>
                    <span>{it.title}</span>
                  </>
                ),
                default: renderChildNode,
              }}
            </ElSubMenu>
          )
          break
        }
        case 'Group': {
          currentNode = (
            <ElMenuItemGroup title={it.title}>
              {{
                default: renderChildNode,
              }}
            </ElMenuItemGroup>
          )
          break
        }
        case 'Page': {
          currentNode = (
            <ElMenuItem index={it.id} onClick={onMenuClick}>
              {{
                title: () => <span>{it.title}</span>,
                default: () => <AIcon class={styles.aIcon} name={it.icon as IconName}/>,
              }}
            </ElMenuItem>
          )
          break
        }
        default:
          currentNode = <></>
      }
      return currentNode
    }

    return () => (
      <>
        <div class={[ styles.aAsideTop, {[styles.aAsideTopCollapse]: props.isCollapse} ]}
          onClick={() => Nav.open('home')}>
          <img alt="" src={logo}/>
          <div>{appTitle}</div>
        </div>
        <ElScrollbar class={styles.aScrollbar}>
          <ElMenu collapse={props.isCollapse} class={[ styles.aMenus ]} ref="menu">
            {{
              default: () => menuTree.value.map(renderMenu),
            }}
          </ElMenu>
        </ElScrollbar>
      </>
    )
  },
  {
    name: 'AAside',
    props: {
      isCollapse: {
        type: Boolean,
        default: false,
      },
    },
  },
)
