'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 _Action = require('../Actions/Action');

var _Action2 = _interopRequireDefault(_Action);

var _SidePanel = require('./SidePanel.scss');

var _SidePanel2 = _interopRequireDefault(_SidePanel);

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; }

/**
 * This component aims to display links as a menu.
 * @param {object} props react props
 *
 @example
 const actions = [
	 { label: 'Preparations', icon: 'fa fa-asterisk', onClick: action('Preparations clicked') },
	 { label: 'Datasets', icon: 'fa fa-file-excel-o', onClick: action('Datasets clicked') },
	 { label: 'Favorites', icon: 'fa fa-star', onClick: action('Favorites clicked') }
 ];
 <SidePanel
	 actions={ actions }
	 docked={ isDocked }
	 selected= { selectedItem }
	 onToggleDock={ action('Toggle dock clicked') }
	 onSelect={ action('onItemSelect') }
 />
 *
 */
function SidePanel(props) {
	var selected = props.selected,
	    onSelect = props.onSelect;

	var actions = props.actions || [];

	var dockedCSS = _defineProperty({}, _SidePanel2.default.docked, props.docked);
	var navCSS = (0, _classnames2.default)(_SidePanel2.default['tc-side-panel'], dockedCSS, 'tc-side-panel');
	var listCSS = (0, _classnames2.default)('nav nav-pills nav-inverse nav-stacked', 'tc-side-panel-list', _SidePanel2.default['action-list']);
	var isActionSelected = function isActionSelected(action) {
		if (selected) {
			return action === selected;
		}
		return action.active;
	};

	return _react2.default.createElement(
		'nav',
		{ className: navCSS },
		_react2.default.createElement(
			'ul',
			{ className: listCSS },
			_react2.default.createElement(
				'li',
				{ className: _SidePanel2.default['toggle-btn'] },
				_react2.default.createElement(_Action2.default, {
					id: props.id && props.id + '-toggle-dock',
					className: _SidePanel2.default.link,
					bsStyle: 'link',
					onClick: props.onToggleDock,
					label: 'Toggle side panel',
					icon: 'talend-arrow-left',
					hideLabel: true,
					tooltipPlacement: props.tooltipPlacement
				})
			),
			actions.map(function (action) {
				return _react2.default.createElement(
					'li',
					{
						key: action.key || action.label,
						className: (0, _classnames2.default)('tc-side-panel-list-item', { active: isActionSelected(action) })
					},
					_react2.default.createElement(_Action2.default, {
						id: props.id && props.id + '-nav-' + action.label.toLowerCase().split(' ').join('-'),
						bsStyle: 'link',
						role: 'link',
						className: _SidePanel2.default.link,
						onClick: function onClick(event) {
							if (onSelect) {
								onSelect(event, action);
							}
							if (action.onClick) {
								action.onClick(event);
							}
						},
						label: action.label,
						icon: action.icon,
						hideLabel: props.docked,
						tooltipPlacement: props.tooltipPlacement
					})
				);
			})
		)
	);
}

var actionPropType = _react2.default.PropTypes.shape({
	active: _react2.default.PropTypes.bool,
	icon: _react2.default.PropTypes.string,
	key: _react2.default.PropTypes.string,
	label: _react2.default.PropTypes.string,
	onClick: _react2.default.PropTypes.func
});

SidePanel.propTypes = {
	id: _react2.default.PropTypes.string,
	actions: _react2.default.PropTypes.arrayOf(actionPropType),
	onSelect: _react2.default.PropTypes.func,
	onToggleDock: _react2.default.PropTypes.func,
	docked: _react2.default.PropTypes.bool,
	selected: actionPropType,
	tooltipPlacement: _react2.default.PropTypes.string
};

SidePanel.defaultProps = {
	tooltipPlacement: 'right'
};
exports.default = SidePanel;