'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _ = require('../../');

var _TreeViewItem = require('./TreeViewItem.scss');

var _TreeViewItem2 = _interopRequireDefault(_TreeViewItem);

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

var PADDING_NORMAL = 15;
var PADDING_LARGE = 20;
function getActionHandler(func, item) {
	return function actionHandler(event) {
		event.stopPropagation();
		func(item);
	};
}

/**
 *
 * Single item of TreeView component
 *
 * @param id, for qa purposes
 * @param item required, item to display
 * 		  item.actions optional, array with actions' to be displayed meta-info
 * @param itemSelectCallback required, callback function to trigger once item was clicked
 * @param itemToggleCallback required, callback function to trigger once item was clicked
 * @param depth optional, depth of an item in a tree
 *
 * @returns XML, jsx to display
 */

function TreeViewItem(_ref) {
	var id = _ref.id,
	    item = _ref.item,
	    _ref$depth = _ref.depth,
	    depth = _ref$depth === undefined ? 0 : _ref$depth,
	    itemSelectCallback = _ref.itemSelectCallback,
	    itemToggleCallback = _ref.itemToggleCallback;
	var _item$toggled = item.toggled,
	    toggled = _item$toggled === undefined ? false : _item$toggled,
	    selected = item.selected,
	    hidden = item.hidden,
	    name = item.name,
	    _item$children = item.children,
	    children = _item$children === undefined ? [] : _item$children,
	    showCounter = item.showCounter,
	    actions = item.actions,
	    _item$icon = item.icon,
	    icon = _item$icon === undefined ? 'talend-folder' : _item$icon,
	    _item$counter = item.counter,
	    counter = _item$counter === undefined ? children.length : _item$counter;

	var toggleIconLabel = toggled ? 'Collapse' : 'Expand';

	function selectHandler() {
		return itemSelectCallback(item);
	}

	function getTreeViewItem(child, i) {
		return _react2.default.createElement(TreeViewItem, {
			id: id && id + '-' + i,
			item: child,
			itemSelectCallback: itemSelectCallback,
			itemToggleCallback: itemToggleCallback,
			depth: depth + 1,
			key: i
		});
	}

	function getIconAction(label, icon_, action, id_) {
		return _react2.default.createElement(_.Action, {
			label: label,
			icon: icon_,
			onClick: getActionHandler(action, item),
			tooltipPlacement: 'right',
			hideLabel: true,
			key: label,
			id: id_ || id + '-' + icon_,
			link: true
		});
	}
	var paddingLeft = depth * PADDING_NORMAL + PADDING_LARGE + 'px';

	return _react2.default.createElement(
		'li',
		{ className: _TreeViewItem2.default['tc-treeview-li'], 'data-hidden': hidden },
		_react2.default.createElement(
			'div',
			{ // eslint-disable-line jsx-a11y/no-static-element-interactions
				className: _TreeViewItem2.default['tc-treeview-item'],
				'data-selected': selected,
				onClick: selectHandler,
				id: id,
				style: { paddingLeft: paddingLeft }
			},
			!children.length || _react2.default.createElement(
				'div',
				{ className: _TreeViewItem2.default['tc-treeview-toggle'], 'data-toggled': toggled },
				getIconAction(toggleIconLabel, 'talend-caret-down', itemToggleCallback, id + '-toggle')
			),
			_react2.default.createElement(
				'span',
				{ className: _TreeViewItem2.default['tc-treeview-folder'] },
				_react2.default.createElement(_.Icon, { name: icon, key: icon })
			),
			_react2.default.createElement(
				'span',
				null,
				name
			),
			_react2.default.createElement(
				'div',
				{ className: _TreeViewItem2.default['tc-treeview-item-ctrl'] },
				showCounter && _react2.default.createElement(_.Badge, { label: counter.toString() }),
				actions && actions.map(function (a) {
					return getIconAction(a.label, a.icon, a.action);
				})
			)
		),
		children && toggled && _react2.default.createElement(
			'ul',
			{ className: _TreeViewItem2.default['tc-treeview-ul'] },
			children.map(getTreeViewItem)
		)
	);
}

TreeViewItem.propTypes = {
	id: _react.PropTypes.string,
	item: _react.PropTypes.shape({
		name: _react.PropTypes.string.isRequired,
		toggled: _react.PropTypes.bool,
		selected: _react.PropTypes.bool,
		children: _react.PropTypes.arrayOf(_react.PropTypes.object),
		icon: _react.PropTypes.string,
		actions: _react.PropTypes.arrayOf(_react.PropTypes.shape({
			action: _react.PropTypes.func,
			label: _react.PropTypes.string,
			icon: _react.PropTypes.string
		})),
		counter: _react.PropTypes.number,
		showCounter: _react.PropTypes.bool
	}).isRequired,
	itemSelectCallback: _react.PropTypes.func.isRequired,
	itemToggleCallback: _react.PropTypes.func.isRequired,
	depth: _react.PropTypes.number
};

exports.default = TreeViewItem;