import React, { PureComponent } from 'react';
import { Tabs, Skeleton } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
import BreadcrumbView from './breadcrumb';

const { TabPane } = Tabs;
export default class PageHeader extends PureComponent {
	onChange = (key) => {
		const { onTabChange } = this.props;
		if (onTabChange) {
			onTabChange(key);
		}
	};

	render() {
		const {
			title,
			logo,
			action,
			content,
			extraContent,
			tabList,
			className,
			tabActiveKey,
			tabDefaultActiveKey,
			tabBarExtraContent,
			loading = false,
			wide = false,
			hiddenBreadcrumb = false,
		} = this.props;

		const clsString = classNames(styles.pageHeader, className);
		const activeKeyProps = {};
		if (tabDefaultActiveKey !== undefined) {
			activeKeyProps.defaultActiveKey = tabDefaultActiveKey;
		}
		if (tabActiveKey !== undefined) {
			activeKeyProps.activeKey = tabActiveKey;
		}
		return (
			<div className={clsString}>
				<div className={wide ? styles.wide : ''}>
					<Skeleton
						loading={loading}
						title={false}
						active
						paragraph={{ rows: 3 }}
						avatar={{ size: 'large', shape: 'circle' }}>
						{hiddenBreadcrumb ? null : <BreadcrumbView {...this.props} />}
						<div className={styles.detail}>
							{logo && <div className={styles.logo}>{logo}</div>}
							<div className={styles.main}>
								<div className={styles.row}>
									{title && <h1 className={styles.title}>{title}</h1>}
									{action && <div className={styles.action}>{action}</div>}
								</div>
								<div className={styles.row}>
									{content && <div className={styles.content}>{content}</div>}
									{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
								</div>
							</div>
						</div>
						{tabList && tabList.length ? (
							<Tabs
								className={styles.tabs}
								{...activeKeyProps}
								onChange={this.onChange}
								tabBarExtraContent={tabBarExtraContent}>
								{tabList.map((item) => (
									<TabPane tab={item.tab} key={item.key} />
								))}
							</Tabs>
						) : null}
					</Skeleton>
				</div>
			</div>
		);
	}
}
