'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.TYPE_BADGE = exports.TYPE_ACTION = exports.TYPE_STATUS = undefined;

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 _reactBootstrap = require('react-bootstrap');

var _Action = require('../Actions/Action');

var _Action2 = _interopRequireDefault(_Action);

var _Icon = require('./../Icon/Icon.component');

var _Icon2 = _interopRequireDefault(_Icon);

var _Status = require('../Status');

var _Status2 = _interopRequireDefault(_Status);

var _TooltipTrigger = require('./../TooltipTrigger');

var _TooltipTrigger2 = _interopRequireDefault(_TooltipTrigger);

var _CollapsiblePanel = require('./CollapsiblePanel.scss');

var _CollapsiblePanel2 = _interopRequireDefault(_CollapsiblePanel);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; }

var TYPE_STATUS = exports.TYPE_STATUS = 'status';
var TYPE_ACTION = exports.TYPE_ACTION = 'action';
var TYPE_BADGE = exports.TYPE_BADGE = 'badge';

function getActionHandler(func, item) {
	return function actionHandler(e) {
		e.stopPropagation();
		func(e, item);
	};
}

var displayModes = [TYPE_ACTION, TYPE_BADGE, TYPE_STATUS];

var statusPropTypes = _extends({
	displayMode: _react.PropTypes.oneOf(displayModes),
	className: _react.PropTypes.string
}, _Status2.default.propTypes);

var actionPropTypes = _extends({
	displayMode: _react.PropTypes.oneOf(displayModes),
	className: _react.PropTypes.string
}, _Action2.default.propTypes);

var simplePropTypes = {
	displayMode: _react.PropTypes.oneOf(displayModes),
	className: _react.PropTypes.string,
	label: _react.PropTypes.string,
	bsStyle: _react.PropTypes.string,
	tooltipPlacement: _reactBootstrap.OverlayTrigger.propTypes.placement
};

function renderHeaderItem(_ref, key) {
	var displayMode = _ref.displayMode,
	    className = _ref.className,
	    headerItem = _objectWithoutProperties(_ref, ['displayMode', 'className']);

	switch (displayMode) {
		case TYPE_STATUS:
			{
				var actions = headerItem.actions,
				    restStatus = _objectWithoutProperties(headerItem, ['actions']);

				var adaptActions = actions.map(function (action) {
					return _extends({}, action, {
						onClick: getActionHandler(action.onClick, headerItem)
					});
				});
				return _react2.default.createElement(_Status2.default, _extends({
					key: key,
					actions: adaptActions
				}, restStatus, {
					className: _CollapsiblePanel2.default[className]
				}));
			}
		case TYPE_ACTION:
			{
				var onClick = headerItem.onClick,
				    restAction = _objectWithoutProperties(headerItem, ['onClick']);

				return _react2.default.createElement(_Action2.default, _extends({
					key: key,
					onClick: getActionHandler(onClick, headerItem),
					className: _CollapsiblePanel2.default[className]
				}, restAction));
			}
		case TYPE_BADGE:
			{
				var label = headerItem.label,
				    tooltipPlacement = headerItem.tooltipPlacement,
				    rest = _objectWithoutProperties(headerItem, ['label', 'tooltipPlacement']);

				return _react2.default.createElement(
					_TooltipTrigger2.default,
					{ key: key, label: label, tooltipPlacement: tooltipPlacement },
					_react2.default.createElement(
						_reactBootstrap.Label,
						_extends({}, rest, { className: _CollapsiblePanel2.default[className] }),
						label
					)
				);
			}
		default:
			{
				var _label = headerItem.label,
				    _tooltipPlacement = headerItem.tooltipPlacement;

				return _react2.default.createElement(
					_TooltipTrigger2.default,
					{ key: key, label: _label, tooltipPlacement: _tooltipPlacement },
					_react2.default.createElement(
						'span',
						{ className: _CollapsiblePanel2.default[className] },
						_label
					)
				);
			}
	}
}
renderHeaderItem.propTypes = _react.PropTypes.oneOfType([_react.PropTypes.shape(statusPropTypes), _react.PropTypes.shape(actionPropTypes), _react.PropTypes.shape(simplePropTypes), _react.PropTypes.arrayOf(_react.PropTypes.oneOfType([_react.PropTypes.shape(statusPropTypes), _react.PropTypes.shape(actionPropTypes), _react.PropTypes.shape(simplePropTypes)]))]);

function renderHeader(header, content, onSelect, onToggle) {
	var headerColumnClass = 'col-' + header.length;
	var headerItems = header.map(function (headerItem, index) {
		if (Array.isArray(headerItem)) {
			var elements = headerItem.map(renderHeaderItem);
			return _react2.default.createElement(
				'div',
				{
					key: index,
					className: (0, _classnames2.default)(_CollapsiblePanel2.default.group, _CollapsiblePanel2.default[headerColumnClass])
				},
				elements
			);
		}
		return _react2.default.createElement(
			'div',
			{
				key: index,
				className: (0, _classnames2.default)(_CollapsiblePanel2.default[headerItem.className], _CollapsiblePanel2.default[headerColumnClass])
			},
			renderHeaderItem(headerItem)
		);
	});

	// Panel component needs an array for header props
	var wrappedHeader = [onSelect ? _react2.default.createElement(
		_reactBootstrap.Button,
		{
			className: (0, _classnames2.default)(_CollapsiblePanel2.default['panel-title'], 'panel-title'),
			bsStyle: 'link',
			key: 1,
			onClick: onSelect
		},
		_react2.default.createElement(
			'div',
			{ className: (0, _classnames2.default)(_CollapsiblePanel2.default['panel-title'], 'panel-title') },
			headerItems
		)
	) : _react2.default.createElement(
		'div',
		{
			className: (0, _classnames2.default)(_CollapsiblePanel2.default['panel-title'], 'panel-title'),
			key: 1
		},
		headerItems
	)];

	if (content) {
		var defaultCaret = _react2.default.createElement(
			_reactBootstrap.Button,
			{
				className: (0, _classnames2.default)(_CollapsiblePanel2.default.toggle, 'toggle'),
				bsStyle: 'link',
				key: 2,
				onClick: onToggle
			},
			_react2.default.createElement(_Icon2.default, {
				key: header.length,
				name: 'talend-caret-down'
			})
		);
		wrappedHeader.push(defaultCaret);
	}
	return wrappedHeader;
}

function getKeyValueContent(content) {
	return _react2.default.createElement(
		'dl',
		null,
		content.map(function (item, index) {
			return _react2.default.createElement(
				'div',
				{ key: index, className: _CollapsiblePanel2.default.content },
				_react2.default.createElement(
					'dt',
					{ className: _CollapsiblePanel2.default.label },
					_react2.default.createElement(
						_reactBootstrap.Label,
						null,
						item.label
					)
				),
				_react2.default.createElement(
					'dd',
					{ className: _CollapsiblePanel2.default.description },
					item.description
				)
			);
		})
	);
}

function getTextualContent(content) {
	return _react2.default.createElement(
		'div',
		{ className: _CollapsiblePanel2.default.content },
		_react2.default.createElement(
			'div',
			{ className: _CollapsiblePanel2.default.head },
			content.head.map(function (item, index) {
				var label = item.label,
				    tooltipPlacement = item.tooltipPlacement,
				    className = item.className;

				return _react2.default.createElement(
					_TooltipTrigger2.default,
					{
						key: index,
						label: label,
						tooltipPlacement: tooltipPlacement
					},
					_react2.default.createElement(
						'span',
						{ className: className },
						label
					)
				);
			})
		),
		_react2.default.createElement(
			'div',
			{ className: (0, _classnames2.default)(_CollapsiblePanel2.default['content-description'], 'content-description') },
			content.description
		)
	);
}

/**
 * Show collapsible panels
 * @example
 *
 * @param header required, an array gathering the header elements except the caret
 * @param onSelect optional, on header click callback function
 * @param onToggle optional, on caret click callback function
 * @param expanded optional, defines if the panel should be expanded or not
 * @param selected optional, defines if the panel is selected or not
 * @param theme optional, defines the theme of the collapsible, there is a default theme
 * @param content optional, defines the content of the panel's body:
 * if content is an array a key value content list is rendered otherwise it is a textual content
 *
 * @example
 * <CollapsiblePanel {...props} />
 */
function CollapsiblePanel(_ref2) {
	var _classNames;

	var header = _ref2.header,
	    content = _ref2.content,
	    onSelect = _ref2.onSelect,
	    onToggle = _ref2.onToggle,
	    selected = _ref2.selected,
	    expanded = _ref2.expanded,
	    theme = _ref2.theme;

	var headerItems = renderHeader(header, content, onSelect, onToggle);
	var className = (0, _classnames2.default)('panel panel-default', _CollapsiblePanel2.default['tc-collapsible-panel'], (_classNames = {}, _defineProperty(_classNames, _CollapsiblePanel2.default['default-panel'], !theme), _defineProperty(_classNames, _CollapsiblePanel2.default[theme], !!theme), _defineProperty(_classNames, _CollapsiblePanel2.default.selected, selected), _defineProperty(_classNames, 'selected', selected), _defineProperty(_classNames, _CollapsiblePanel2.default.open, expanded), _classNames));

	var children = null;
	if (content) {
		children = Array.isArray(content) ? getKeyValueContent(content) : getTextualContent(content);
	}
	return _react2.default.createElement(
		'div',
		{ className: className },
		_react2.default.createElement(
			'div',
			{ className: (0, _classnames2.default)(_CollapsiblePanel2.default['panel-heading'], 'panel-heading') },
			headerItems
		),
		_react2.default.createElement(
			_reactBootstrap.Panel,
			{
				collapsible: !!content,
				expanded: expanded
			},
			children
		)
	);
}

CollapsiblePanel.propTypes = {
	header: _react.PropTypes.arrayOf(renderHeaderItem.propTypes).isRequired,
	onSelect: _react.PropTypes.func,
	onToggle: _react.PropTypes.func,
	expanded: _react.PropTypes.bool,
	selected: _react.PropTypes.bool,
	theme: _react.PropTypes.string,
	content: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.shape({
		label: _react.PropTypes.string,
		description: _react.PropTypes.string
	})), _react.PropTypes.shape({
		head: _react.PropTypes.arrayOf(_react.PropTypes.shape(simplePropTypes)),
		description: _react.PropTypes.string
	})])
};

exports.default = CollapsiblePanel;