import React from 'react';

import {
  Helmet,
  HelmetProvider,
} from 'react-helmet-async';
import { connect } from 'react-redux';
import { renderRoutes } from 'react-router-config';

import {
  getMenuData,
  getPageTitle,
} from '@ant-design/pro-layout';

import styles from './UserLayout.less';

const UserLayout = props => {
  const {
    route = {
      routes: [],
    },
  } = props;
  const { breadcrumb } = getMenuData(route.routes);
  const title = getPageTitle({
    breadcrumb,
    title: (props.global && props.global.title) || '',
    ...props,
  });

  return (
    <HelmetProvider>
      <Helmet>
        <title>{title}</title>
        <link
          rel="shortcut icon"
          href={`https://panda-water.cn/web4/${props.global &&
            props.global.shortcutIcon}`}
        />
        <meta name="description" content={title} />
      </Helmet>

      <div className={styles.container}>
        <div className={styles.content}>
          {renderRoutes(route.routes)}
        </div>
        {/* <DefaultFooter links={[]} copyright="Copyright © 熊猫智慧水务 2020 All Rights Reserved 沪ICP备11036640-1"/> */}
      </div>
    </HelmetProvider>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
});
export default connect(
  mapStateToProps,
  null,
)(UserLayout);
