'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _TreeViewItem2 = _interopRequireDefault(_TreeViewItem);

var _TreeView = require('./TreeView.scss');

var _TreeView2 = _interopRequireDefault(_TreeView);

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

/**
 * A view component to display any tree structure, like folders or categories.
 *
 * @param id, for qa purposes
 * @param structure optional, tree structure to display, see example below
 * @param headerText optional, specifies text in component's header
 * @param addAction optional, defines if 'add' button is displayed and
 *        specifies button click event callback
 * @param addActionLabel optional, specifies tooltip label for 'add' button
 * @param itemSelectCallback required, tree item click event callback function
 * @param itemToggleCallback required, tree item expand/collapse event callback function
 *
 * const defaultProps = {
 * 	structure: [{
 * 		name: 'grandpa',
 * 		children: [
 * 			{
 * 				name: 'mami',
 * 				toggled: true,
 * 				children: [
 * 					{ name: 'me', selected: true },
 * 					{ name: 'bro' },
 * 				],
 * 			},
 * 			{ name: 'aunt', toggled: false, children: [{ name: 'cousin' }] },
 * 		],
 * 		toggled: true
 * 	}],
 * 	headerText: 'some elements',
 * 	addAction: () => null,
 * 	addActionLabel: 'add element',
 * 	itemSelectCallback: () => null,
 * 	itemToggleCallback: () => null,
 * }
 *
 * <TreeView {...defaultProps} />
 *
 */
var TreeView = function TreeView(_ref) {
	var id = _ref.id,
	    headerText = _ref.headerText,
	    structure = _ref.structure,
	    addAction = _ref.addAction,
	    addActionLabel = _ref.addActionLabel,
	    itemSelectCallback = _ref.itemSelectCallback,
	    itemToggleCallback = _ref.itemToggleCallback;
	return _react2.default.createElement(
		'div',
		{ className: _TreeView2.default['tc-treeview'] },
		_react2.default.createElement(
			'header',
			{ className: _TreeView2.default['tc-treeview-header'] },
			_react2.default.createElement(
				'span',
				null,
				headerText
			),
			addAction && _react2.default.createElement(_.Action, {
				label: addActionLabel,
				icon: 'talend-plus',
				onClick: addAction,
				tooltipPlacement: 'right',
				hideLabel: true,
				link: true,
				id: id + '-add',
				key: addActionLabel
			})
		),
		_react2.default.createElement(
			'nav',
			{ className: _TreeView2.default['tc-treeview-nav'] },
			_react2.default.createElement(
				'ul',
				{ className: _TreeView2.default['tc-treeview-ul'] },
				structure.map(function (item, i) {
					return _react2.default.createElement(_TreeViewItem2.default, {
						id: id && id + '-' + i,
						item: item,
						itemSelectCallback: itemSelectCallback,
						itemToggleCallback: itemToggleCallback,
						key: i
					});
				})
			)
		)
	);
};

TreeView.propTypes = {
	id: _react.PropTypes.string,
	headerText: _react.PropTypes.string,
	structure: _react.PropTypes.arrayOf(_TreeViewItem2.default.propTypes.item),
	addAction: _react.PropTypes.func,
	addActionLabel: _react.PropTypes.string,
	itemSelectCallback: _react.PropTypes.func.isRequired,
	itemToggleCallback: _react.PropTypes.func.isRequired
};

TreeView.defaultProps = {
	addActionLabel: 'Add folder',
	headerText: 'Folders'
};

exports.default = TreeView;