import React, { useEffect, useMemo, useRef } from 'react';
import { Link } from 'umi';
import { Result, Button } from 'antd';
import Authorized from '@/utils/Authorized';
import { getMatchMenu } from '@umijs/route-utils';
import Promenu from '../components/Promenu';

const noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
);


const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
  menuList.map((item) => {
    const localItem = {
      ...item,
      children: item.children ? menuDataRender(item.children) : undefined,
    };
    return Authorized.check(item.authority, localItem, null) as MenuDataItem;
  });


const CosMenuLayout: React.FC<BasicLayoutProps> = (props) => {
  const {
    dispatch,
    children,
    location = {
      pathname: '/',
    },
  } = props;

  const menuDataRef = useRef<MenuDataItem[]>([]);

  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
    }
  }, []);
  const authorized = useMemo(
    () =>
      getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
        authority: undefined,
      },
    [location.pathname],
  );


  return (
    
      <Authorized authority={authorized!.authority} noMatch={noMatch}>
        <Promenu />
        <div style={{marginTop:'5px'}}>
          {children}
        </div>
        
        
      </Authorized>
  );
};

export default CosMenuLayout;
