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 className='basicLayout-children' style={{ height: innerHeight - 240 }}>
        {children}
      </div>
    </Authorized>
  );
};

export default CosMenuLayout;