/** @format */
/**
 * External dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/utils';
import { Fill } from 'react-slot-fill';
import { isArray, noop } from 'lodash';
import { IconButton } from '@wordpress/components';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

/**
 * Internal dependencies
 */
import './style.scss';
import WordPressNotices from './wordpress-notices';

const Header = ( { sections, onToggle, isSidebarOpen } ) => {
	const _sections = isArray( sections ) ? sections : [ sections ];

	const documentTitle = _sections
		.map( section => {
			return isArray( section ) ? section[ 1 ] : section;
		} )
		.reverse()
		.join( ' ‹ ' );

	document.title = decodeEntities(
		sprintf(
			__( '%1$s ‹ %2$s — WooCommerce', 'woo-dash' ),
			documentTitle,
			wpApiSettings.schema.name
		)
	);

	return (
		<div className="woocommerce-header">
			<h1 className="woocommerce-header__breadcrumbs">
				<span>
					<Link to="/">WooCommerce</Link>
				</span>
				{ _sections.map( ( section, i ) => {
					const sectionPiece = isArray( section ) ? (
						<Link to={ section[ 0 ] }> { section[ 1 ] }</Link>
					) : (
						section
					);
					return <span key={ i }>{ sectionPiece }</span>;
				} ) }
			</h1>
			<div className="woocommerce-header__buttons">
				<div className="woocommerce-header__toggle">
					<IconButton
						className="woocommerce-header__button"
						onClick={ onToggle }
						icon="clock"
						label={ __( 'Show Sidebar', 'woo-dash' ) }
						aria-expanded={ isSidebarOpen }
					/>
				</div>
				<WordPressNotices />
			</div>
		</div>
	);
};

Header.propTypes = {
	sections: PropTypes.node.isRequired,
	onToggle: PropTypes.func.isRequired,
	isSidebarOpen: PropTypes.bool,
};

Header.defaultProps = {
	onToggle: noop,
};

export default function( props ) {
	return (
		<Fill name="header">
			<Header { ...props } />
		</Fill>
	);
}