import React, { memo, useState } from 'react'
import {
  SnippetsOutlined,
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined
} from '@ant-design/icons'
import type { FC, ReactNode } from 'react'
import { useNavigate } from 'react-router-dom'
import type { MenuProps } from 'antd'
import { Button, Menu } from 'antd'
import { AppMenyWrapper } from './styled'

type MenuItem = Required<MenuProps>['items'][number]

interface IProps {
  children?: ReactNode
}

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 items: MenuItem[] = [
  getItem('我的订单', '1', <SnippetsOutlined />),
  getItem('暂不开放', '2', <DesktopOutlined />)
  // getItem('Option 3', '3', <ContainerOutlined />),

  // getItem('Navigation One', 'sub1', <MailOutlined />, [getItem('Option 5', '5'), getItem('Option 6', '6'), getItem('Option 7', '7'), getItem('Option 8', '8')]),

  // getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
  //   getItem('Option 9', '9'),
  //   getItem('Option 10', '10'),

  //   getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')])
  // ])
]

type ObjectString = {
  [key: string]: string
}

const navigateUrl: ObjectString = {
  '1': '/discover/ConsultationOrder',
  '2': '/discover/xx'
}

const AppMenu: FC<IProps> = memo(() => {
  const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState(false)

  const toggleCollapsed = () => {
    setCollapsed(!collapsed)
  }

  const onselectHandler = (e: any) => {
    console.log(e, 'eee')
    navigate(navigateUrl[e.key])
  }

  return (
    <AppMenyWrapper style={{ width: 256 }}>
      <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
        inlineCollapsed={collapsed}
        items={items}
        onSelect={(e) => onselectHandler(e)}
      />
    </AppMenyWrapper>
  )
})

export default AppMenu