'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 _ItemTitle = require('../ItemTitle');

var _ItemTitle2 = _interopRequireDefault(_ItemTitle);

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

var _Display2 = _interopRequireDefault(_Display);

var _DisplayTile = require('./DisplayTile.scss');

var _DisplayTile2 = _interopRequireDefault(_DisplayTile);

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

var columnPropType = _react.PropTypes.shape({
	key: _react.PropTypes.string.isRequired,
	label: _react.PropTypes.string.isRequired
});

/**
 * render a tile sub element
 */
function tileItem(column, value) {
	return [_react2.default.createElement(
		'dt',
		{ className: _DisplayTile2.default.itemtitle },
		column.label
	), _react2.default.createElement(
		'dd',
		{ title: value, className: _DisplayTile2.default.itemvalue },
		value
	)];
}

/**
 * Render a tile
 */
function Tile(_ref) {
	var id = _ref.id,
	    columns = _ref.columns,
	    item = _ref.item,
	    itemProps = _ref.itemProps,
	    titleProps = _ref.titleProps;

	var onDoubleClick = void 0;
	var onItemSelect = void 0;

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

	if (titleProps.onClick) {
		onDoubleClick = function onDoubleClick(event) {
			return titleProps.onClick(event, item);
		};
	}
	if (onSelect) {
		onItemSelect = function onItemSelect(event) {
			return onSelect(item, event);
		};
	}

	var checkbox = 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) {
					return onToggle(e, item);
				},
				checked: isSelected(item)
			}),
			_react2.default.createElement(
				'span',
				null,
				_react2.default.createElement(
					'span',
					{ className: 'sr-only' },
					'Select ',
					item.name
				)
			)
		)
	) : null;

	var titleClasses = (0, _classnames2.default)(_DisplayTile2.default.title, _DisplayTile2.default.titlelink);

	var tileClasses = (0, _classnames2.default)(_DisplayTile2.default.tile, classNameKey && item[classNameKey], isSelected && isSelected(item) && (selectedClass || 'active'));

	return _react2.default.createElement(
		'div',
		{ // eslint-disable-line jsx-a11y/no-static-element-interactions
			id: id,
			className: tileClasses,
			onClick: onItemSelect,
			onDoubleClick: onDoubleClick
		},
		checkbox,
		_react2.default.createElement(_ItemTitle2.default, {
			id: id && id + '-title',
			className: titleClasses,
			item: item,
			titleProps: titleProps
		}),
		_react2.default.createElement(
			'dl',
			{ className: _DisplayTile2.default.itemlist },
			columns.filter(function (column) {
				return column.key !== titleProps.key;
			}).map(function (column) {
				return tileItem(column, item[column.key]);
			})
		)
	);
}

Tile.propTypes = {
	id: _react.PropTypes.string,
	columns: _react.PropTypes.arrayOf(columnPropType).isRequired,
	item: _react.PropTypes.object.isRequired, // 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} itemProps the item configuration props
 * @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'),
	},
	itemProps: {
		onSelect: action('onSelect'),
		width: '250px'
	}
};
<DisplayTile {...props} />
 */
function DisplayTile(props) {
	var id = props.id,
	    columns = props.columns,
	    items = props.items,
	    itemProps = props.itemProps,
	    titleProps = props.titleProps;

	var _ref3 = itemProps || {},
	    width = _ref3.width;

	return _react2.default.createElement(
		'div',
		{ className: 'tc-list-display' },
		_react2.default.createElement(
			'ul',
			{ className: _DisplayTile2.default.tiles },
			items.map(function (item, index) {
				return _react2.default.createElement(
					'li',
					{ key: index },
					_react2.default.createElement(Tile, {
						id: id && id + '-' + index,
						columns: columns,
						item: item,
						itemProps: itemProps,
						titleProps: titleProps,
						style: { width: width || '250px' }
					})
				);
			})
		)
	);
}

DisplayTile.propTypes = _Display2.default;

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

exports.default = DisplayTile;