import React, { Component, PropTypes } from 'react';
import shallowCompare from 'react-addons-shallow-compare';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import classNames from 'classnames';
var style = {
	'root': 'Cal__Header__root',
	'blank': 'Cal__Header__blank',
	'wrapper': 'Cal__Header__wrapper',
	'landscape': 'Cal__Header__landscape',
	'dateWrapper': 'Cal__Header__dateWrapper',
	'day': 'Cal__Header__day',
	'year': 'Cal__Header__year',
	'date': 'Cal__Header__date'
};
var animation = {
	'enter': 'Cal__Animation__enter',
	'enterActive': 'Cal__Animation__enterActive',
	'leave': 'Cal__Animation__leave',
	'leaveActive': 'Cal__Animation__leaveActive'
};

var Header = function (_Component) {
	babelHelpers.inherits(Header, _Component);

	function Header() {
		babelHelpers.classCallCheck(this, Header);
		return babelHelpers.possibleConstructorReturn(this, Object.getPrototypeOf(Header).apply(this, arguments));
	}

	babelHelpers.createClass(Header, [{
		key: 'shouldComponentUpdate',
		value: function shouldComponentUpdate(nextProps) {
			return shallowCompare(this, nextProps);
		}
	}, {
		key: 'render',
		value: function render() {
			var _classNames;

			var _props = this.props;
			var layout = _props.layout;
			var locale = _props.locale;
			var onClick = _props.onClick;
			var selectedDate = _props.selectedDate;
			var shouldHeaderAnimate = _props.shouldHeaderAnimate;
			var theme = _props.theme;

			var values = selectedDate && [{
				item: 'year',
				value: selectedDate.year()
			}, {
				item: 'day',
				key: selectedDate.format('YYYYMMDD'),
				value: selectedDate.format(locale.headerFormat)
			}];

			return React.createElement(
				'div',
				{ className: classNames(style.root, (_classNames = {}, babelHelpers.defineProperty(_classNames, style.blank, !selectedDate), babelHelpers.defineProperty(_classNames, style.landscape, layout == 'landscape'), _classNames)), style: theme && { backgroundColor: theme.headerColor, color: theme.textColor.active }, onClick: selectedDate ? function () {
						return onClick(selectedDate);
					} : null },
				selectedDate ? React.createElement(
					'div',
					{ className: style.wrapper, title: 'Scroll to ' + selectedDate.format(locale.headerFormat), 'aria-label': selectedDate.format(locale.headerFormat + ' YYYY') },
					values.map(function (_ref) {
						var item = _ref.item;
						var key = _ref.key;
						var value = _ref.value;

						var output = React.createElement(
							'span',
							{ key: item + '-' + (key || value), className: style.date, 'aria-hidden': true },
							value
						);

						return React.createElement(
							'div',
							{ key: item, className: classNames(style.dateWrapper, style[item]) },
							shouldHeaderAnimate ? React.createElement(
								ReactCSSTransitionGroup,
								{ transitionName: animation, transitionEnterTimeout: 250, transitionLeaveTimeout: 250 },
								output
							) : output
						);
					})
				) : React.createElement(
					'div',
					{ className: style.wrapper },
					locale.blank
				)
			);
		}
	}]);
	return Header;
}(Component);

Header.propTypes = {
	layout: PropTypes.string,
	locale: PropTypes.object,
	onClick: PropTypes.func,
	selectedDate: PropTypes.object,
	shouldHeaderAnimate: PropTypes.bool,
	theme: PropTypes.object
};
export default Header;