'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.CellContent = CellContent;
exports.RowRenderer = RowRenderer;
exports.ColumnHeader = ColumnHeader;
exports.ListHeaders = ListHeaders;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _ItemTitle = require('../ItemTitle');

var _ItemTitle2 = _interopRequireDefault(_ItemTitle);

var _TooltipTrigger = require('../../TooltipTrigger');

var _TooltipTrigger2 = _interopRequireDefault(_TooltipTrigger);

var _Display = require('../Display/Display.propTypes');

var _Display2 = _interopRequireDefault(_Display);

var _DisplayTable = require('./DisplayTable.scss');

var _DisplayTable2 = _interopRequireDefault(_DisplayTable);

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

function getItemString(item) {
	if (item === undefined || item === null) {
		return '';
	}
	return item.toString();
}

function CellContent(_ref) {
	var isTitle = _ref.isTitle,
	    item = _ref.item,
	    column = _ref.column,
	    titleProps = _ref.titleProps,
	    id = _ref.id;

	if (isTitle) {
		return _react2.default.createElement(_ItemTitle2.default, {
			id: id && id + '-title',
			item: item,
			titleProps: titleProps
		});
	}
	if (item[column.key] instanceof Array) {
		return _react2.default.createElement(_Actions.Actions, {
			actions: item[column.key],
			link: true,
			hideLabel: true
		});
	}
	var str = getItemString(item[column.key]);
	return _react2.default.createElement(
		_TooltipTrigger2.default,
		{ label: str, tooltipPlacement: 'top' },
		_react2.default.createElement(
			'span',
			{ className: (0, _classnames2.default)(_DisplayTable2.default['item-text'], 'item-text') },
			str
		)
	);
}
CellContent.propTypes = {
	isTitle: _react.PropTypes.bool,
	item: _react.PropTypes.object, // eslint-disable-line react/forbid-prop-types
	column: _react.PropTypes.shape({
		key: _react.PropTypes.string
	}).isRequired,
	titleProps: _react.PropTypes.object, // eslint-disable-line react/forbid-prop-types
	id: _react.PropTypes.string
};

function RowRenderer(props) {
	var id = props.id,
	    item = props.item,
	    itemProps = props.itemProps,
	    titleProps = props.titleProps;

	var _ref2 = itemProps || {},
	    classNameKey = _ref2.classNameKey,
	    onToggle = _ref2.onToggle,
	    isSelected = _ref2.isSelected,
	    selectedClass = _ref2.selectedClass;

	var checkboxColumn = onToggle && isSelected ? _react2.default.createElement(
		'td',
		null,
		_react2.default.createElement(
			'div',
			{ className: 'checkbox' },
			_react2.default.createElement(
				'label',
				{ htmlFor: id && id + '-check' },
				_react2.default.createElement('input', {
					id: id && id + '-check',
					type: 'checkbox',
					onChange: function onChange(e) {
						onToggle(e, item);
					},
					checked: isSelected(item)
				}),
				_react2.default.createElement(
					'span',
					null,
					_react2.default.createElement(
						'span',
						{ className: 'sr-only' },
						'Select ',
						item.name
					)
				)
			)
		)
	) : null;
	var classes = (0, _classnames2.default)(classNameKey && item[classNameKey], isSelected && isSelected(item) && (selectedClass || 'active'));
	return _react2.default.createElement(
		'tr',
		{ id: id, className: classes },
		checkboxColumn,
		props.columns.map(function (column, index) {
			var isTitle = column.key === titleProps.key;
			var cell = _react2.default.createElement(CellContent, {
				isTitle: isTitle,
				item: item,
				column: column,
				titleProps: titleProps,
				id: id
			});

			// actions are only on title and on 'text' display mode
			var displayModeKey = titleProps.displayModeKey;

			var displayActions = isTitle && (!displayModeKey || !item[displayModeKey] || item[displayModeKey] === 'text');

			return _react2.default.createElement(
				'td',
				{ key: index },
				_react2.default.createElement(
					'div',
					{
						className: (0, _classnames2.default)('tc-list-display-table-td', _DisplayTable2.default['tc-list-display-table-td'])
					},
					_react2.default.createElement(
						'div',
						{ className: (0, _classnames2.default)('cell', _DisplayTable2.default.cell) },
						cell
					),
					displayActions && item.actions && _react2.default.createElement(
						'div',
						{ className: (0, _classnames2.default)('actions', _DisplayTable2.default.actions) },
						_react2.default.createElement(_Actions.Actions, {
							actions: item.actions,
							hideLabel: true,
							link: true
						})
					)
				)
			);
		})
	);
}
RowRenderer.propTypes = {
	id: _react.PropTypes.string,
	item: _react.PropTypes.object, // eslint-disable-line react/forbid-prop-types
	columns: _react.PropTypes.arrayOf(_react.PropTypes.shape({ key: _react.PropTypes.string.isRequired })).isRequired,
	itemProps: _Display2.default.itemProps,
	titleProps: _react.PropTypes.shape(_ItemTitle2.default.propTypes.titleProps).isRequired
};

function getCaretIcon(isCurrentSortField) {
	if (isCurrentSortField) {
		return 'talend-caret-down';
	}
	return null;
}

function getIconTransform(isDescending) {
	if (isDescending) {
		return 'rotate-180';
	}
	return null;
}

function getNextDirection(isCurrentSortField, currentSort) {
	if (isCurrentSortField) {
		return !currentSort;
	}

	return false;
}

function ColumnHeader(_ref3) {
	var index = _ref3.index,
	    column = _ref3.column,
	    sort = _ref3.sort;

	var header = void 0;

	if (column.hideHeader) {
		header = _react2.default.createElement(
			'span',
			{ className: 'sr-only' },
			column.label
		);
	} else if (sort) {
		var isCurrentSortField = sort.field === column.key;
		var onChange = function onChange(event) {
			return sort.onChange(event, {
				field: column.key,
				isDescending: getNextDirection(isCurrentSortField, sort.isDescending)
			});
		};
		var actionProps = {
			'aria-label': 'Sort on ' + column.label + ' field',
			className: _DisplayTable2.default.header,
			icon: getCaretIcon(isCurrentSortField),
			iconPosition: 'right',
			iconTransform: getIconTransform(sort.isDescending),
			label: column.label,
			link: true,
			onClick: onChange
		};
		header = _react2.default.createElement(_Actions.Action, actionProps);
	} else {
		header = _react2.default.createElement(
			'span',
			{ className: _DisplayTable2.default.header },
			column.label
		);
	}

	return _react2.default.createElement(
		'th',
		{ key: index },
		header,
		!column.hideHeader && _react2.default.createElement(
			'div',
			{ 'aria-hidden': 'true' },
			column.label
		)
	);
}
ColumnHeader.propTypes = {
	index: _react.PropTypes.number,
	column: _react.PropTypes.shape({
		key: _react.PropTypes.string,
		label: _react.PropTypes.string,
		hideHeader: _react.PropTypes.bool
	}).isRequired,
	sort: _react.PropTypes.shape({
		field: _react.PropTypes.string,
		isDescending: _react.PropTypes.bool,
		onChange: _react.PropTypes.func
	})
};

function ListHeaders(props) {
	var columns = props.columns,
	    isSelected = props.isSelected,
	    onToggleAll = props.onToggleAll,
	    sort = props.sort;

	return _react2.default.createElement(
		'tr',
		null,
		isSelected && onToggleAll && _react2.default.createElement('th', null),
		columns.map(function (column, index) {
			return _react2.default.createElement(ColumnHeader, {
				key: index,
				index: index,
				column: column,
				sort: sort
			});
		})
	);
}

ListHeaders.propTypes = {
	columns: _react.PropTypes.arrayOf(_react.PropTypes.shape({ label: _react.PropTypes.string })).isRequired,
	isSelected: _react.PropTypes.func,
	onToggleAll: _react.PropTypes.func,
	sort: _react.PropTypes.shape({
		field: _react.PropTypes.string,
		isDescending: _react.PropTypes.bool,
		onChange: _react.PropTypes.func
	})
};

/**
 * @param {array} columns the array of column definitions
 * @param {array} items the array of items to display
 * @param {object} titleProps the title configuration props
 * @example
 const props = {
	items: [
		{
			id: 1,
			name: 'Title with actions',
			created: '2016-09-22',
			modified: '2016-09-22',
			author: 'Jean-Pierre DUPONT',
			actions: [{
				label: 'edit',
				icon: 'fa fa-edit',
				onClick: action('onEdit'),
			}],
			icon: 'fa fa-file-excel-o',
			display: 'text',
		},
		{
			id: 2,
			name: 'Title in input mode',
			created: '2016-09-22',
			modified: '2016-09-22',
			author: 'Jean-Pierre DUPONT',
			icon: 'fa fa-file-pdf-o',
			display: 'input',
		},
	],
	columns: [
		{ key: 'id', label: 'Id' },
		{ key: 'name', label: 'Name' },
		{ key: 'author', label: 'Author' },
		{ key: 'created', label: 'Created' },
		{ key: 'modified', label: 'Modified' },
	],
	titleProps: {
		key: 'name',
		iconKey: 'icon',
		displayModeKey: 'display',
		onClick: action('onClick'),
		onEditCancel: action('onEditCancel'),
		onEditValidate: action('onEditValidate'),
	},
};
 <DisplayTable {...props} />
 */
function DisplayTable(props) {
	var id = props.id,
	    columns = props.columns,
	    items = props.items,
	    itemProps = props.itemProps,
	    sort = props.sort,
	    titleProps = props.titleProps;

	var _ref4 = itemProps || {},
	    isSelected = _ref4.isSelected,
	    onToggleAll = _ref4.onToggleAll;

	var containerClassName = (0, _classnames2.default)('tc-list-display', _DisplayTable2.default.container);
	var tableClassName = (0, _classnames2.default)('table', 'tc-list-display-table', _DisplayTable2.default.table);
	var message = null;
	if (!items || items.length === 0) {
		message = _react2.default.createElement(
			'span',
			{ className: _DisplayTable2.default['no-result'] },
			'No result found'
		);
	}

	return _react2.default.createElement(
		'div',
		{ className: containerClassName },
		_react2.default.createElement(
			'div',
			null,
			_react2.default.createElement(
				'table',
				{ className: tableClassName },
				_react2.default.createElement(
					'thead',
					null,
					_react2.default.createElement(ListHeaders, {
						id: id,
						columns: columns,
						isSelected: isSelected,
						items: items,
						onToggleAll: onToggleAll,
						sort: sort
					})
				),
				_react2.default.createElement(
					'tbody',
					null,
					items.map(function (item, index) {
						return _react2.default.createElement(RowRenderer, {
							id: id && id + '-' + index,
							key: index,
							columns: columns,
							item: item,
							itemProps: itemProps,
							titleProps: titleProps
						});
					})
				)
			),
			message
		)
	);
}

DisplayTable.propTypes = _Display2.default;

DisplayTable.defaultProps = {
	items: [],
	titleProps: { key: 'name' }
};

exports.default = DisplayTable;