import React from 'react';
import { FormattedMessage } from 'umi/locale';
import Link from 'umi/link';
import PageHeader from '../../../PageHeader';
import { connect } from 'dva';
import GridContent from './GridContent';
import styles from './index.less';
import MenuContext from './BasicLayout/MenuContext';

const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => {
	return (
		<div className={wrapperClassName}>
			{top}
			<MenuContext.Consumer>
				{(value) => (
					<PageHeader
						wide={contentWidth === 'Fixed'}
						home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
						{...value}
						key="pageheader"
						{...restProps}
						linkElement={Link}
						breadcrumbSeparator=">"
						itemRender={(item) => {
							if (item.locale) {
								return <FormattedMessage id={item.locale} defaultMessage={item.name} />;
							}
							return item.name;
						}}
					/>
				)}
			</MenuContext.Consumer>
			{children ? (
				<div className={styles.content}>
					<GridContent>{children}</GridContent>
				</div>
			) : null}
		</div>
	);
};

export default connect(({ settings }) => ({
	contentWidth: settings.contentWidth,
}))(PageHeaderWrapper);