'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _ItemTitle2 = _interopRequireDefault(_ItemTitle);

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

var _Icon2 = _interopRequireDefault(_Icon);

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

var _Column = require('../Column.properties');

var _Column2 = _interopRequireDefault(_Column);

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

function getDefinitionItem(column, value, index) {
	return _react2.default.createElement(
		'div',
		{ key: index, className: 'tc-list-item-definition-item' },
		_react2.default.createElement(
			'div',
			{ className: 'tc-list-item-definition-term' },
			column.label
		),
		_react2.default.createElement(
			'div',
			{ title: value, className: 'tc-list-item-definition-description' },
			value
		)
	);
}

function Item(_ref) {
	var id = _ref.id,
	    columns = _ref.columns,
	    actions = _ref.actions,
	    item = _ref.item,
	    itemProps = _ref.itemProps;
	var classNameKey = itemProps.classNameKey,
	    onSelect = itemProps.onSelect,
	    onOpen = itemProps.onOpen,
	    isSelected = itemProps.isSelected,
	    onChange = itemProps.onChange,
	    onSubmit = itemProps.onSubmit,
	    onCancel = itemProps.onCancel;

	var top = 5;
	function increaseTopIndent() {
		top += 30;
	}
	var onItemOpen = onOpen && function (event) {
		event.stopPropagation();
		onOpen(event, item);
	};
	var onItemSelect = onSelect && function (event) {
		return onSelect(event, item);
	};
	var onTitleChange = onChange && function (event) {
		onChange(event, {
			value: event.target.value,
			model: item
		});
	};
	var onTitleSubmit = onSubmit && function (event) {
		onSubmit(event, {
			value: event.target.value,
			model: item
		});
	};
	var onTitleCancel = onCancel && function (event) {
		onCancel(event, item);
	};

	function getIcon(column, index) {
		if (item[column.key]) {
			return _react2.default.createElement(
				'div',
				{ key: index, className: 'tc-list-item-icon' },
				_react2.default.createElement(_Icon2.default, { name: item[column.key] })
			);
		}
		return _react2.default.createElement('div', { key: index, className: 'tc-list-item-icon' });
	}

	function getTitle(column, index) {
		var titleProperties = {
			id: id && id + '-title',
			value: item[column.key],
			display: item.display,
			onClick: onItemOpen,
			onChange: onTitleChange,
			onSubmit: onTitleSubmit,
			onCancel: onTitleCancel
		};
		return _react2.default.createElement(_ItemTitle2.default, _extends({ key: index }, titleProperties));
	}

	function getCheckbox() {
		var className = (0, _classnames2.default)('checkbox tc-list-item-checkbox', isSelected(item) && 'checked');
		var style = { top: top + 'px' };
		increaseTopIndent();
		return _react2.default.createElement(
			'div',
			{ className: className, style: style },
			_react2.default.createElement(
				'label',
				{ htmlFor: id && id + '-check' },
				_react2.default.createElement('input', {
					id: id && id + '-check',
					type: 'checkbox',
					onChange: onItemSelect,
					checked: isSelected(item)
				}),
				_react2.default.createElement(
					'span',
					null,
					_react2.default.createElement(
						'span',
						{ className: 'sr-only' },
						'Select ',
						item.name
					)
				)
			)
		);
	}

	function getActionByKey(key) {
		return actions.find(function (action) {
			return action.key === key;
		});
	}

	function getAction(action, className, index) {
		var style = { top: top + 'px' };
		increaseTopIndent();
		var actionProps = {
			label: action.label,
			icon: action.icon,
			className: action.className,
			onClick: function onClick(event) {
				action.onClick(event, item);
			},
			hideLabel: true,
			link: true
		};
		return _react2.default.createElement(
			'div',
			{ key: index, className: className, style: style },
			_react2.default.createElement(_Actions.Action, actionProps)
		);
	}

	function getActionColumn(column, index) {
		var action = getActionByKey(column.key);
		var className = (0, _classnames2.default)('tc-list-item-action', item[column.key] && 'pinned');
		return getAction(action, className, index);
	}

	var actionsOnHover = actions.filter(function (action) {
		return columns.findIndex(function (column) {
			return action.key === column.key;
		}) < 0;
	});
	var getActionOnHover = function getActionOnHover(action, index) {
		return getAction(action, 'tc-actions', index);
	};

	var customClass = classNameKey && item[classNameKey];
	var selectedClass = isSelected && isSelected(item) && (itemProps.selectedClass || 'active');
	var itemClasses = (0, _classnames2.default)('tc-list-item', customClass, selectedClass);

	var textColumns = columns.filter(function (column) {
		return !column.type || column.type === 'text';
	});

	var getCellFor = function getCellFor(column, index) {
		switch (column.type) {
			case 'action':
				return getActionColumn(column, index);
			case 'icon':
				return getIcon(column, index);
			case 'title':
				return getTitle(column, index);
			default:
				return null;
		}
	};

	return _react2.default.createElement(
		'div',
		{ className: itemClasses },
		onSelect && isSelected && getCheckbox(),
		columns.map(function (column, index) {
			return getCellFor(column, index);
		}),
		actionsOnHover && actionsOnHover.map(function (action, index) {
			return getActionOnHover(action, index);
		}),
		_react2.default.createElement(
			'div',
			{ className: 'tc-list-item-definition-list' },
			textColumns.map(function (column, index) {
				return getDefinitionItem(column, item[column.key], index);
			})
		)
	);
}

Item.propTypes = {
	id: _react2.default.PropTypes.string,
	columns: _react2.default.PropTypes.arrayOf(_Column2.default.propTypes).isRequired,
	actions: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
		key: _react2.default.PropTypes.string.isRequired,
		label: _react2.default.PropTypes.string.isRequired,
		icon: _react2.default.PropTypes.string.isRequired,
		className: _react2.default.PropTypes.string,
		onClick: _react2.default.PropTypes.func.isRequired
	})),
	item: _react2.default.PropTypes.shape({
		display: _react2.default.PropTypes.string
	}).isRequired,
	itemProps: _react2.default.PropTypes.shape({
		classNameKey: _react2.default.PropTypes.string,
		selectedClass: _react2.default.PropTypes.string,
		isSelected: _react2.default.PropTypes.func,
		onSelect: _react2.default.PropTypes.func,
		onOpen: _react2.default.PropTypes.func,
		onChange: _react2.default.PropTypes.func,
		onSubmit: _react2.default.PropTypes.func,
		onCancel: _react2.default.PropTypes.func
	})
};

Item.defaultProps = {
	actions: [],
	itemProps: {}
};

exports.default = Item;