'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _AppHeaderBar = require('../AppHeaderBar');

var _AppHeaderBar2 = _interopRequireDefault(_AppHeaderBar);

var _OneColumn = require('./OneColumn');

var _OneColumn2 = _interopRequireDefault(_OneColumn);

var _TwoColumns = require('./TwoColumns');

var _TwoColumns2 = _interopRequireDefault(_TwoColumns);

var _Drawer = require('../Drawer');

var _Drawer2 = _interopRequireDefault(_Drawer);

var _Layout = require('./Layout.scss');

var _Layout2 = _interopRequireDefault(_Layout);

var _constants = require('./constants');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

/**
 * The Layout component is a container
 * that should follow the body of your App.
 * If the Layout is not after the body you have to
 * add some CSS
 * @example
body > div {
	max-height: 100vh;
	overflow: hidden;
	display: flex;
	width: 100vw;
}
 * @param {object} props react props
 * @example
 <Layout mode="TwoColumns" one={one} two={two}></Layout>
 */
function Layout(_ref) {
	var header = _ref.header,
	    mode = _ref.mode,
	    drawers = _ref.drawers,
	    children = _ref.children,
	    rest = _objectWithoutProperties(_ref, ['header', 'mode', 'drawers', 'children']);

	var appCSS = (0, _classnames2.default)('tc-layout', _Layout2.default.layout);
	var headerCSS = (0, _classnames2.default)('tc-layout-header', _Layout2.default.header);
	var Component = void 0;
	switch (mode) {
		case _constants.DISPLAY_MODE_ONE_COLUMN:
			Component = _OneColumn2.default;
			break;
		case _constants.DISPLAY_MODE_TWO_COLUMNS:
			Component = _TwoColumns2.default;
			break;
		default:
			Component = _OneColumn2.default;
	}
	return _react2.default.createElement(
		'div',
		{ className: appCSS },
		_react2.default.createElement(
			'div',
			{ className: headerCSS },
			_react2.default.createElement(_AppHeaderBar2.default, header)
		),
		Component ? _react2.default.createElement(
			Component,
			rest,
			children
		) : null,
		_react2.default.createElement(
			_Drawer2.default.Animation,
			null,
			drawers && drawers.map(function (drawer, key) {
				return _react2.default.createElement(
					_Drawer2.default,
					{ key: key, className: _Layout2.default.drawer },
					drawer
				);
			})
		)
	);
}

Layout.propTypes = {
	header: _react.PropTypes.shape(_AppHeaderBar2.default.propTypes),
	mode: _react.PropTypes.oneOf(_constants.DISPLAY_MODES),
	drawers: _react.PropTypes.arrayOf(_react.PropTypes.element),
	children: _react.PropTypes.element
};

exports.default = Layout;