import React, { useState } from 'react';

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

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

import RightContent from '../components/GlobalHeader/RightContent';
import { Panel } from '../components/SliderPanel';
import generRoutes from '../utils/routes';
// import routes from '../routes/mockRoute';
import styles from './UserLayout.less';

const settings = {
  // navTheme: 'dark',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'side',
  contentWidth: 'Fixed',
  fixedHeader: false,
  autoHideHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  menu: {
    locale: "zh-CN",
  },
  title: 'Ant Design Pro',
  pwa: false,
  iconfontUrl: ''
};
const renderIcon = (icon, size) => {
  return <img src={`https://panda-water.cn/web4/${icon}`} style={{width: `${size}px`, height: `${size}px`, opacity: '0.8'}}/>
}
const menuExtraRender = (currentRoutes) => {
  const [toggleSystem, setToggleSystem] = useState(false)
  return {
    render: ({collapsed}) => (
      <a style={{display: 'flex', alignItems: 'center'}}>
        <img src={`http://panda-water.cn/web4/${currentRoutes && currentRoutes.extData.icon}`} style={{width: '20px', height: '20px'}}/>
        <span style={{margin: '0 10px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}}>{currentRoutes && currentRoutes.name}</span>
        <MenuFoldOutlined onClick={() => setToggleSystem(!toggleSystem)}/>
      </a>
    ),
    toggleSystem,
    onClose: () => setToggleSystem(!toggleSystem)
  }
  return 
};

const renderTitle = (title) => {
  return  <span className={styles['header-title']}>{title}</span>
}



const BasicLayout = props => {
  /* eslint-disable no-unused-vars */
  const routes = generRoutes(props.global && props.global.widgets || []);
  const [pathname, setPathname] = useState('/welcome');
  const [currentRoutes, setCurrentRoutes] = useState(() => {
    return routes[0]
  })
  const [collapse, setCollapse] = useState(false)
  const handleMenuCollapse = (collapse) => {
    setCollapse(collapse)
  };
  matchRoutes(props.route.routes, props.location.pathname);
  const extraRender = menuExtraRender(currentRoutes)
  const onChange = (index) => {
    setCurrentRoutes(routes[index])
  }
  const updateSettings = (config) => {
    console.log(config)
  }
  return (
    <ProLayout
      logo="http://panda-water.cn/web4/assets/images/logo/单独图案-白色.svg"
      siderWidth="145px"
      title=""
      fixSiderbar={true}
      onCollapse={(collapse) => handleMenuCollapse(collapse)}
      menuExtraRender={extraRender.render}
      rightContentRender={() => <RightContent />}
      headerContentRender={() => renderTitle(props.global.title)}
      location={{
        pathname,
      }}
      locale={'zh-CN'}
      menuDataRender={() => [
        ...(currentRoutes && currentRoutes.routes || [])
      ]}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || !menuItemProps.path) {
          return defaultDom;
        }
        return <Link to={menuItemProps.path}>
            {renderIcon(menuItemProps.extData && menuItemProps.extData.icon, 17)} 
            {
              defaultDom
            }
          </Link>;
      }}
      subMenuItemRender={(menuItemProps, defaultDom) => {

        return <>
            {renderIcon(menuItemProps.extData && menuItemProps.extData.icon, 17)} 
            {
              collapse ? <div className={`ant-pro-menu-item ${styles.shortName}`}>{menuItemProps.extData.shortName}</div>:defaultDom
            }
          </>;
      }} 
      {...props}

    >
      {renderRoutes(props.route.routes)}
      <Panel visible={extraRender.toggleSystem} keyboard={true} onClose={extraRender.onClose} data={routes || []} onChange={onChange}/>
      <div id="subapp-container" className="subapp-container" />
      <SettingDrawer settings={settings} onSettingChange={(config) => updateSettings(config)}/>
    </ProLayout>
  );
};
const mapStateToProps = (state) => {
  return {
    global: state.getIn(['global', 'globalConfig'])
  }
}
export default connect(mapStateToProps, null)(BasicLayout);
