'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactBootstrap = require('react-bootstrap');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _uuid = require('uuid');

var _uuid2 = _interopRequireDefault(_uuid);

var _Breadcrumbs = require('./Breadcrumbs.scss');

var _Breadcrumbs2 = _interopRequireDefault(_Breadcrumbs);

var _Actions = require('../Actions');

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

var _Icon2 = _interopRequireDefault(_Icon);

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

/**
 * Default max items to display without starting by ellipsis
 */
var DEFAULT_MAX_ITEMS = 3;

/**
 * Indicate the current page's location within a navigational hierarchy.
 * @param {object} props   react props
 * @example
 <Breadcrumbs
 maxItems={3}
 items={items}
 />
 */
function Breadcrumbs(props) {
	var items = props.items || [];

	var nbItems = items.length;
	var maxItemsToDisplay = props.maxItems || DEFAULT_MAX_ITEMS;
	var maxItemsReached = nbItems > maxItemsToDisplay;
	var ellipsisIndex = nbItems - 1 - maxItemsToDisplay;
	var hiddenItems = items.slice(0, ellipsisIndex + 1).map(function (hiddenItem, index) {
		return {
			id: props.id + '-item-' + index,
			label: hiddenItem.text,
			title: hiddenItem.title,
			onClick: function onClick(event) {
				return hiddenItem.onClick(event, hiddenItem);
			}
		};
	});
	/**
  * Render breadcrumb item
  * @param item Plain object representative of breadcrumb item
  * @param index Item position
  * @returns {*} Breadcrumb item rendering depending of its position
  */
	function renderBreadcrumbItem(item, index) {
		if (maxItemsReached && index < ellipsisIndex) {
			return null;
		}
		var text = item.text,
		    title = item.title,
		    onClick = item.onClick;

		var isActive = index === nbItems - 1;
		var id = props.id + '-item-' + index;
		var separator = index < props.items.length - 1 && _react2.default.createElement(
			'li',
			{ className: 'separator', key: index + '-separator' },
			_react2.default.createElement(_Icon2.default, { name: 'talend-chevron-left', transform: 'rotate-180' })
		);

		/**
   * Wrapper for onClick in order to return item
   * @param args Arguments of default onClick callback
   * @returns {Function} New callback with the item
   */
		var wrappedOnClick = void 0;
		if (onClick) {
			wrappedOnClick = function wrappedOnClick(event) {
				return onClick(event, item);
			};
		}

		if (maxItemsReached && index === ellipsisIndex) {
			return [_react2.default.createElement(
				'li',
				{ className: (0, _classnames2.default)(_Breadcrumbs2.default.dots), key: index, 'aria-hidden': 'true' },
				_react2.default.createElement(_Actions.ActionDropdown, {
					id: props.id + '-ellipsis',
					items: hiddenItems,
					label: '...',
					link: true,
					noCaret: true
				})
			), separator];
		}
		return [_react2.default.createElement(
			'li',
			{ className: isActive ? 'active' : '', key: index },
			!isActive && onClick ? _react2.default.createElement(
				_reactBootstrap.Button,
				{
					id: id,
					bsStyle: 'link',
					role: 'link',
					title: title,
					onClick: wrappedOnClick
				},
				text
			) : _react2.default.createElement(
				'span',
				{ id: id },
				text
			)
		), separator];
	}

	return _react2.default.createElement(
		'ol',
		{ id: props.id, className: (0, _classnames2.default)('breadcrumb', _Breadcrumbs2.default['tc-breadcrumb'], 'tc-breadcrumb') },
		items.map(renderBreadcrumbItem)
	);
}

Breadcrumbs.propTypes = {
	id: _react2.default.PropTypes.string,
	items: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
		text: _react2.default.PropTypes.string.isRequired,
		title: _react2.default.PropTypes.string,
		onClick: _react2.default.PropTypes.func
	})),
	maxItems: _react2.default.PropTypes.number
};

Breadcrumbs.defaultProps = {
	id: '' + _uuid2.default.v4()
};

exports.default = Breadcrumbs;