import React,{useEffect} from 'react';
import { Menu } from 'antd';
import { createCrudService } from '../../components/crud/_';
import apiurl from '../../service/apiurl';
import {ProfileOutlined} from '@ant-design/icons';
import {useNavigate} from 'react-router';
import {MenuItem} from '../../models/_';
import {useDispatch,useSelector} from "react-redux";

function getMenuUrl(menuItem: MenuItem | undefined): string | null {
  if (!menuItem) {
    return null;
  }

  const url = menuItem.path;
  if (url) {
    return url;
  }

  if (menuItem.children && menuItem.children.length) {
    for (const m of menuItem.children) {
      const url = getMenuUrl(m);

      if (url) {
        return url;
      }
    }
  }

  return null;
}

const TopMenu: React.FC<{
  menu: MenuItem[];
  menuIndexes: string[];
}> = ({menu, menuIndexes}) => {
  console.log('12333333',menu);
  console.log(menuIndexes);
  const dispatch = useDispatch();

  const navigate = useNavigate();

  const getMenuIcon = (val: any) => {
    let icon = null;
    if (val.icon === "HomeFilled") {
      icon = <span className="shouye topMenuIcon"></span>
    } else if (val.icon === "FundFilled") {
      icon = <span className="yubao topMenuIcon"></span>
    } else if (val.icon === "AlertFilled") {
      icon = <span className="yujing topMenuIcon"></span>
    } else if (val.icon === "GoldenFilled") {
      icon = <span className="yuyan topMenuIcon"></span>
    } else if (val.icon === "AppstoreFilled") {
      icon = <span className="yuan topMenuIcon"></span>
    } else if (val.icon === "FileTextFilled") {
      icon = <span className="guanli topMenuIcon"></span>
    }
    return icon;
  };


  const menuClicked = (id: any) => {
    const menuItem:any = menu.find(m => m.id == id);
    if (menuItem.title === "首页") {
      navigate(menuItem.path)
     }
    const url = getMenuUrl(menuItem);
    if (url) {
      navigate(url);
    }
  }
 
  return (

    <div className='app-top-menu'>
      {
        menu?.map(o => {
          return (
            <div
              key={o.id}
              className={`app-top-menu-item${menuIndexes[0] == o.id ? ' active' : ''}`}
              onClick={() => {menuClicked(o.id)}}
              style={{cursor:"pointer"}}
            >
              <img src={`${process.env.PUBLIC_URL}/assets/${o.icon}.png`} alt=""/>
              <span>{o.title}</span>
            </div>
          )
        })
      }
    </div>
  )
}

export default React.memo(TopMenu);