'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _TabBar = require('../TabBar');

var _TabBar2 = _interopRequireDefault(_TabBar);

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

var _OneColumn2 = _interopRequireDefault(_OneColumn);

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

var _TwoColumns2 = _interopRequireDefault(_TwoColumns);

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,
	    footer = _ref.footer,
	    mode = _ref.mode,
	    drawers = _ref.drawers,
	    tabs = _ref.tabs,
	    children = _ref.children,
	    rest = _objectWithoutProperties(_ref, ['header', 'footer', 'mode', 'drawers', 'tabs', 'children']);

	var appCSS = (0, _classnames2.default)('tc-layout', _Layout2.default.layout);
	var headerCSS = (0, _classnames2.default)('tc-layout-header', _Layout2.default.header);
	var footerCSS = (0, _classnames2.default)('tc-layout-footer', _Layout2.default.footer);
	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 },
		header && _react2.default.createElement(
			'div',
			{ className: headerCSS },
			header
		),
		Component && _react2.default.createElement(
			Component,
			_extends({ drawers: drawers, tabs: tabs }, rest),
			children
		),
		footer && _react2.default.createElement(
			'footer',
			{ role: 'contentinfo', className: footerCSS },
			footer
		)
	);
}

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

exports.default = Layout;