import { Menu, MenuProps } from 'antd'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import type { FC, ReactNode } from 'react'
import mapRoutes from '@/router-handle/mapRoutes'
import { useLocation, useNavigate } from 'react-router-dom'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'

interface Iprops {
  children?: ReactNode
}
type MenuItem = Required<MenuProps>['items'][number]

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group'
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type
  } as MenuItem
}

const LeftMenu: FC<Iprops> = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const [openKey, setOpenKey] = useState('')
  const [collapsed, setCollapsed] = useState(false)
  useEffect(() => {
    const index = location.pathname.lastIndexOf('/')
    const partentPath = location.pathname.slice(0, index)
    setOpenKey(partentPath)
  }, [location.pathname])
  // menu 点击事件
  const handleMenuClick = useCallback<Exclude<MenuProps['onClick'], undefined>>(
    (e) => {
      navigate(e.key)
    },
    [navigate]
  )
  //menu item子项
  const items: MenuProps['items'] = useMemo(() => {
    return mapRoutes().map((item) => {
      if (item.children) {
        return getItem(
          item.name,
          item.path!,
          item.children.some((it) => {
            return it.path === location.pathname
          })
            ? item.highIcon
            : item.icon,
          item.children!.map((citem) => {
            return getItem(citem.name, citem.path!)
          })
        )
      } else {
        return getItem(
          item.name,
          item.path!,
          location.pathname === item.path ? item.highIcon : item.icon
        )
      }
    })
  }, [location.pathname])
  //默认选择的路由
  const defaultSelectedKeys = useMemo(() => {
    return [location.pathname]
  }, [location.pathname])
  //打开某个菜单
  const onOpenChange = useCallback<Exclude<MenuProps['onOpenChange'], undefined>>((keys) => {
    setOpenKey(keys[1])
  }, [])
  //菜单当前打开的keys
  const menuOpenKeys = useMemo(() => {
    return [openKey]
  }, [openKey])
  //菜单样式
  const menuStyle = useMemo(() => {
    return {
      height: '100%',
      width: collapsed ? 80 : 240
    }
  }, [collapsed])
  //折叠展开菜单
  const toggle = () => {
    setCollapsed(!collapsed)
  }
  return (
    <div className="h-full relative">
      <Menu
        defaultSelectedKeys={defaultSelectedKeys}
        mode="inline"
        onClick={handleMenuClick}
        items={items}
        style={menuStyle}
        inlineCollapsed={collapsed}
        onOpenChange={onOpenChange}
        openKeys={menuOpenKeys}
        inlineIndent={24}
      />
      <div
        className=" absolute bottom-5 left-1/2  -translate-x-1/2 cursor-pointer"
        onClick={toggle}>
        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </div>
    </div>
  )
}

export default memo(LeftMenu)