'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _Action2 = _interopRequireDefault(_Action);

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

var _TreeViewItem2 = _interopRequireDefault(_TreeViewItem);

var _getClassNames = require('./getClassNames');

var _getClassNames2 = _interopRequireDefault(_getClassNames);

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

var _TreeView2 = _interopRequireDefault(_TreeView);

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

var getClassName = (0, _getClassNames2.default)(_TreeView2.default);
/**
 * A view component to display any tree structure, like folders or categories.
 *
 * @param structure optional, tree structure to display, see example below
 * @param headerText optional, specifies text in component's header
 * @param addAction optional, defines either 'add' button will be displayed and
 *        specifies button click event callback
 * @param addActionLabel optional, specifies tooltip label for 'add' button
 * @param itemRemoveLabel optional, specifies tooltip label for 'remove' button
 * @param itemSelectCallback required, tree item click event callback function
 * @param itemToggleCallback required, tree item expand/collapse event callback function
 * @param itemRemoveCallback optional, tree item removal 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',
 * 	itemRemoveLabel: 'remove element',
 * 	itemSelectCallback: () => null,
 * 	itemToggleCallback: () => null,
 * 	itemRemoveCallback: () => null,
 * }
 *
 * <TreeView {...defaultProps} />
 *
 */

var TreeView = function TreeView(_ref) {
	var headerText = _ref.headerText,
	    structure = _ref.structure,
	    addAction = _ref.addAction,
	    addActionLabel = _ref.addActionLabel,
	    itemRemoveLabel = _ref.itemRemoveLabel,
	    itemSelectCallback = _ref.itemSelectCallback,
	    itemToggleCallback = _ref.itemToggleCallback,
	    itemRemoveCallback = _ref.itemRemoveCallback;
	return _react2.default.createElement(
		'div',
		{ className: getClassName('tc-treeview') },
		_react2.default.createElement(
			'header',
			{ className: getClassName('tc-treeview-header') },
			_react2.default.createElement(
				'span',
				null,
				headerText
			),
			addAction && _react2.default.createElement(_Action2.default, {
				label: addActionLabel,
				icon: 'talend-plus',
				onClick: addAction,
				tooltipPlacement: 'right',
				hideLabel: true,
				link: true
			})
		),
		_react2.default.createElement(
			'nav',
			{ className: getClassName('tc-treeview-nav') },
			_react2.default.createElement(
				'ul',
				{ className: getClassName('tc-treeview-ul') },
				structure.map(function (item) {
					return _react2.default.createElement(_TreeViewItem2.default, {
						item: item,
						itemSelectCallback: itemSelectCallback,
						itemToggleCallback: itemToggleCallback,
						itemRemoveCallback: itemRemoveCallback,
						itemRemoveLabel: itemRemoveLabel,
						depth: 0,
						key: item.name
					});
				})
			)
		)
	);
};

TreeView.propTypes = {
	headerText: _react.PropTypes.string,
	structure: _react.PropTypes.arrayOf(_react.PropTypes.shape({
		name: _react.PropTypes.string.isRequired,
		toggled: _react.PropTypes.bool,
		selected: _react.PropTypes.bool,
		children: _react.PropTypes.array
	})),
	addAction: _react.PropTypes.func,
	addActionLabel: _react.PropTypes.string,
	itemRemoveLabel: _react.PropTypes.string,
	itemSelectCallback: _react.PropTypes.func.isRequired,
	itemToggleCallback: _react.PropTypes.func.isRequired,
	itemRemoveCallback: _react.PropTypes.func
};

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

exports.default = TreeView;