'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _Display2 = _interopRequireDefault(_Display);

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

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

var _ItemTitle2 = _interopRequireDefault(_ItemTitle);

var _DisplayLarge = require('./DisplayLarge.scss');

var _DisplayLarge2 = _interopRequireDefault(_DisplayLarge);

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

function getColumnsData(_ref) {
	var columns = _ref.columns,
	    item = _ref.item,
	    titleKey = _ref.titleKey;

	return columns.filter(function (column) {
		return column.key !== titleKey;
	}).map(function (column) {
		var data = {
			label: column.label,
			value: item[column.key]
		};
		if (column.formater && data.value) {
			data.value = column.formater(data.value);
		}
		return data;
	});
}

function getTwoDim(columnsData) {
	return columnsData.filter(function (column, i) {
		return i % 2 === 0;
	}).map(function (column) {
		var i = columnsData.indexOf(column);
		if (columnsData.length > i + 1) {
			return [column, columnsData[i + 1]];
		}
		return [column];
	});
}

function rowRenderer(_ref2) {
	var id = _ref2.id,
	    index = _ref2.index,
	    columns = _ref2.columns,
	    item = _ref2.item,
	    itemProps = _ref2.itemProps,
	    titleProps = _ref2.titleProps;

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

	var columnsData = getColumnsData({ columns: columns, item: item, titleKey: titleProps.key });
	var info = getTwoDim(columnsData);
	var panel = (0, _classnames2.default)('panel', 'panel-default', _DisplayLarge2.default.panel, classNameKey && item[classNameKey], isSelected && isSelected(item) && (selectedClass || 'active'));

	var checkboxColumn = onToggle && isSelected ? _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 displayActions = !titleProps.displayModeKey || item[titleProps.displayModeKey] === 'text';
	var actions = displayActions ? _react2.default.createElement(_Actions.Actions, {
		actions: item.actions || [],
		hideLabel: true,
		link: true
	}) : null;

	return _react2.default.createElement(
		'div',
		{ id: id, className: panel, key: index },
		checkboxColumn,
		_react2.default.createElement(
			'div',
			{ className: _DisplayLarge2.default.head },
			_react2.default.createElement(_ItemTitle2.default, {
				id: id && id + '-title',
				className: _DisplayLarge2.default.title,
				item: item,
				titleProps: titleProps
			}),
			actions
		),
		_react2.default.createElement(
			'div',
			{ className: _DisplayLarge2.default.columns },
			info.map(function (group, i) {
				return _react2.default.createElement(
					'ul',
					{ key: i },
					group.map(function (obj, j) {
						return _react2.default.createElement(
							'li',
							{ key: j },
							_react2.default.createElement(
								'span',
								{ className: _DisplayLarge2.default.label },
								obj.label
							),
							_react2.default.createElement(
								'span',
								{ className: _DisplayLarge2.default.value, title: obj.value },
								obj.value
							)
						);
					})
				);
			})
		)
	);
}

rowRenderer.propTypes = {
	id: _react.PropTypes.string,
	index: _react.PropTypes.number,
	columns: _react.PropTypes.arrayOf(_react.PropTypes.object),
	item: _react.PropTypes.object, // eslint-disable-line react/forbid-prop-types
	itemProps: _Display2.default.itemProps,
	titleProps: _ItemTitle2.default.propTypes.titleProps
};

/**
 * @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'),
	},
};
 <DisplayLarge {...props} />
 */
function DisplayLarge(props) {
	var id = props.id,
	    columns = props.columns,
	    items = props.items,
	    itemProps = props.itemProps,
	    titleProps = props.titleProps;

	var classnames = (0, _classnames2.default)(_DisplayLarge2.default.container, 'tc-list-display');
	return _react2.default.createElement(
		'div',
		{ className: classnames },
		items.map(function (item, index) {
			return rowRenderer({
				index: index,
				id: id && id + '-' + index,
				columns: columns,
				item: item,
				itemProps: itemProps,
				titleProps: titleProps
			});
		})
	);
}

DisplayLarge.propTypes = _Display2.default;

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

exports.default = DisplayLarge;