import React, { useState, useEffect } from 'react';
import check from '@/components/Authorized/CheckPermissions';
import { matchRoutes, renderRoutes } from 'react-router-config';
import { Link, Switch } 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);

  useEffect(() => {
    console.log(localStorage.getItem('panda-publish'));
    if (localStorage.getItem('panda-publish') == 'getway') {
      window.globalConfig = {
        ...window.globalConfig,
        access_token: localStorage.getItem('token'),
        hasGateWay: true,
        apiGatewayDomain: `${window.location.origin}${'/PandaCore/GateWay'}`,
      };
    } else {
      window.globalConfig = {
        ...window.globalConfig,
        access_token: localStorage.getItem('token'),
        hasGateWay: false,
        apiGatewayDomain: `${window.location.origin}`,
      };
    }
  }, []);
  const handleMenuCollapse = () => {}; // get children authority
  // 获取url地址参数
  const getQueryVariable = name => {
    // 获取url上的参数（使用decodeURIComponent对url参数进行解码）
    let search = decodeURIComponent(window.location.search).replace('?', '');
    const tempArr = search !== '' ? search.split('&') : [];

    // 将参数名转小写，参数值保留原大小写
    tempArr.forEach(item => {
      if (item) {
        const itemArr = item.split('=');
        search = search.replace(itemArr[0], itemArr[0].toLowerCase());
      }
    });

    // 正则匹配指定的参数
    const reg = new RegExp(`(^|&)${name.toLowerCase()}=([^&]*)(&|$)`);
    const result = search.match(reg);

    return result != null ? result[2] : '';
  };
  matchRoutes(props.route.routes, props.location.pathname);

  return (
    <>
      {sessionStorage.getItem('_omsticket') == 'd438aaf9578f405299ae740c4eb75aae' ? (
        <>{renderRoutes(props.route.routes)}</>
      ) : (
        <ProLayout
          logo={() => <img src={logo} style={{ width: '32px', height: '32px' }} alt="" />}
          style={{ height: '100vh' }}
          onCollapse={handleMenuCollapse}
          onMenuHeaderClick={() => {}}
          // footerRender={() => defaultFooterDom}
          rightContentRender={() => <RightContent routes={props.route.routes} />}
          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}
        >
          <Switch>{renderRoutes(props.route.routes)}</Switch>
        </ProLayout>
      )}
    </>
  );
};

export default BasicLayout;
