import React, { useState } from 'react';
import check from '@/components/Authorized/CheckPermissions';
import { matchRoutes, renderRoutes } from 'react-router-config';
import { Link } from 'react-router-dom';

import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';

import logo from '../assets/images/logo/panda-logo.svg';
import RightContent from '../components/GlobalHeader/RightContent';
import { BASENAME } from '@/utils/constants';

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

// eslint-disable-next-line no-unused-vars
const defaultFooterDom = (
  <DefaultFooter
    copyright={`${new Date().getFullYear()} 熊猫智慧水务技术委员会出品`}
    links={false}
  />
);

const BasicLayout = props => {
  /* eslint-disable no-unused-vars */
  const [pathname, setPathname] = useState(`/${BASENAME}`);
  const filterMenu = menuRoutes =>
    menuRoutes
      .map(route => {
        const routeCopy = { ...route };
        if (routeCopy.routes) routeCopy.routes = filterMenu(routeCopy.routes);
        return routeCopy.hideMenu ||
          (routeCopy.authority && !check(routeCopy.authority, true, false))
          ? null
          : routeCopy;
      })
      .filter(Boolean);
  const handleMenuCollapse = () => {}; // get children authority
  matchRoutes(props.route.routes, props.location.pathname);
  return (
    <ProLayout
      logo={() => (
        <img src={logo} style={{ width: '32px', height: '32px' }} alt="" />
      )}
      style={{ height: '100vh' }}
      onCollapse={handleMenuCollapse}
      onMenuHeaderClick={() => {}}
      // footerRender={() => defaultFooterDom}
      rightContentRender={() => <RightContent />}
      title="熊猫运维平台"
      fixedHeader
      route={
        {
          // routes: config.routes,
        }
      }
      location={{
        pathname,
      }}
      menuDataRender={() => filterMenu(props.route.routes)}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || !menuItemProps.path) {
          return defaultDom;
        }
        // console.log(menuItemProps);
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      itemRender={(route, params, routes, paths) => {
        const first = false; // routes.indexOf(route) === 0;
        return first ? (
          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        ) : (
          <span>{route.breadcrumbName}</span>
        );
      }}
      {...props}
    >
      {renderRoutes(props.route.routes)}
    </ProLayout>
  );
};

export default BasicLayout;