import { Menu } from 'antd'
import {Fragment, useEffect, useState} from 'react'
import { useSelector } from 'react-redux';
import { generateMenu } from '../../permission';
import { useLocation, useNavigate } from 'react-router-dom';

export default function SideBar() {
  const navigate = useNavigate()
  const location = useLocation()
  const routes: [] = useSelector((store: any)=>store.permission)
  // const dispatch = useDispatch()
  const [menuItem, setMenuItem] = useState<Array<any>>([{
    key: '/',
    label: '首页',
    title: '首页',
    icon: ''
  }])
  const getMenu = () => {
    if(routes.length) {
      const roleMenu = generateMenu(routes as any)
      setMenuItem([...menuItem, ...roleMenu])
    }
  }
  const goPage = (val: any) => {
    console.log(val);
    
    navigate(val.key, { replace: true })
  }
  useEffect(()=>{
    getMenu()
  }, [routes.length])
  return (
    <Fragment>
      <div style={{height: '64px', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>FateVerse</div>
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={[location.pathname]}
        selectedKeys={[location.pathname]}
        items={menuItem}
        onClick={goPage}
      />
    </Fragment>
  )
}