import React, { useState } from 'react';

import {
  matchRoutes,
  renderRoutes,
} from 'react-router-config';
import { Link } from 'react-router-dom';

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

import logo from '../assets/logo.svg';
import RightContent from '../components/GlobalHeader/RightContent';
import config from '../routes/config';

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

const defaultFooterDom = (
  <DefaultFooter
    copyright={`${new Date().getFullYear()} 蚂蚁金服体验技术部出品`}
    links={[
      {
        key: 'Ant Design Pro',
        title: 'Ant Design Pro',
        href: 'https://pro.ant.design',
        blankTarget: true,
      },
      {
        key: 'github',
        title: <GithubOutlined />,
        href: 'https://github.com/ant-design/ant-design-pro',
        blankTarget: true,
      },
      {
        key: 'Ant Design',
        title: 'Ant Design',
        href: 'https://ant.design',
        blankTarget: true,
      },
    ]}
  />
);
const BasicLayout = props => {
  /* eslint-disable no-unused-vars */
  const [pathname, setPathname] = useState('/welcome');

  const handleMenuCollapse = () => {}; // get children authority
  matchRoutes(props.route.routes, props.location.pathname);
  return (
    <ProLayout
      logo={logo}
      onCollapse={handleMenuCollapse}
      onMenuHeaderClick={() => {}}
      footerRender={() => defaultFooterDom}
      rightContentRender={() => <RightContent />}
      route={{
        routes: config.routes,
      }}
      location={{
        pathname,
      }}
      menuDataRender={() => [
        {
          path: '/',
          component: 'BasicLayout',
          name: 'Dashboard',
          icon: 'icon-dashboard',
          routes: [
            {
              path: '/Welcome/1',
              name: '一级页面',
            },
            {
              path: '/Welcome/2',
              name: '二级页面',
            },
            {
              path: '/Welcome/3',
              name: '三级页面',
            },
          ],
        },
      ]}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || !menuItemProps.path) {
          return defaultDom;
        }
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      itemRender={(route, params, routes, paths) => {
        const first = 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;
