import React, { useEffect } from 'react';

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

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

import logo from '../assets/images/logo/panda-logo.svg';
import styles from './UserLayout.less';
import { BASENAME } from '@/utils/constants';

const UserLayout = props => {
  const {
    route = {
      routes: [],
    },
    children,
  } = props;
  // const { formatMessage } = useIntl();
  const { breadcrumb } = getMenuData(route.routes);
  const title = getPageTitle({
    pathname: window.location.pathname,
    // formatMessage,
    breadcrumb,
    ...props,
  });

  // useEffect(() => {
  //   window.location.href = `/${BASENAME}/user/login`;
  // });

  return (
    <HelmetProvider>
      <Helmet>
        <title>{title === 'Ant Design Pro' ? '熊猫运维平台' : title}</title>
        <meta name="description" content={title} />
      </Helmet>

      <div className={styles.container}>
        <div className={styles.lang}>{/* <SelectLang /> */}</div>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
              <img alt="logo" className={styles.logo} src={logo} />
              <span className={styles.title}>熊猫运维平台</span>
            </div>
            <div className={styles.desc}>{/* Ant Design 是西湖区最具影响力的 Web 设计规范 */}</div>
          </div>
          {children || renderRoutes(route.routes)}
        </div>
        <DefaultFooter copyright={`${new Date().getFullYear()} 熊猫智慧水务有限公司`} links={[]} />
      </div>
    </HelmetProvider>
  );
};

export default UserLayout;
