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 || menuItem.redirect;
  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(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 === "雨水工灾情") {
      getReadStatus()
     }
    const url = getMenuUrl(menuItem);

    if (url) {
      navigate(url);
    }
  }
  /**
 * @description 由于进入雨水工灾情 初始化进入是这个页面 发请求来获取未读和已读状态
 * 
 */
  const getReadStatus = () => {
    createCrudService(apiurl.ssyq.status).delGet().then((res) => {
      if (res.code === 200) {
        dispatch.runtime.setIsReadObject(res.data)
      }
    })
  }

useEffect(() => {
  getReadStatus()
}, [])
  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={() => {
                if(o.title==='防汛大屏'){
                  // window.open('http://local.gunshiiot.com:18083/xfdp/#/v/home?token='+localStorage.getItem('access_token'))
                  window.open('http://36.139.207.50:18083/xfdp/#/v/home?token='+localStorage.getItem('access_token'))
                }else if(o.title==='数字孪生大屏'){
                  window.open('https://owrres.oss-cn-shenzhen.aliyuncs.com/zhtmp/index.html#/mgr/home')
                }else{
                  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);