'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.RenderButton = RenderButton;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _Icon2 = _interopRequireDefault(_Icon);

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

var _TooltipTrigger2 = _interopRequireDefault(_TooltipTrigger);

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

var _ItemTitle2 = _interopRequireDefault(_ItemTitle);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TITLE_MODE_TEXT = 'text';
var TITLE_MODE_INPUT = 'input';

var ESC_KEY = 27;
var ENTER_KEY = 13;

function RenderButton(_ref) {
	var id = _ref.id,
	    value = _ref.value,
	    className = _ref.className,
	    item = _ref.item,
	    onClick = _ref.onClick;

	function executeOnClickAction(event) {
		event.stopPropagation();
		onClick(event, item);
	}

	function click(event) {
		// only fires onclick when left-click
		if (event.button === 0) {
			executeOnClickAction(event);
		}
	}

	function mouseDown(event) {
		// only fires onclick when middle-click
		if (event.button === 1) {
			executeOnClickAction(event);
		}
	}

	return _react2.default.createElement(
		_reactBootstrap.Button,
		{ id: id, className: className, onMouseDown: mouseDown, onClick: click, role: 'link', bsStyle: 'link' },
		value
	);
}

RenderButton.propTypes = {
	id: _react.PropTypes.string,
	value: _react.PropTypes.string,
	className: _react.PropTypes.string,
	item: _react.PropTypes.object, // eslint-disable-line react/forbid-prop-types
	onClick: _react.PropTypes.func
};

function renderText(_ref2) {
	var id = _ref2.id,
	    value = _ref2.value,
	    className = _ref2.className;

	return _react2.default.createElement(
		'span',
		{ id: id, className: className },
		value
	);
}

renderText.propTypes = {
	id: _react.PropTypes.string,
	value: _react.PropTypes.string,
	className: _react.PropTypes.string
};

var TitleInput = exports.TitleInput = function (_React$Component) {
	_inherits(TitleInput, _React$Component);

	function TitleInput(props) {
		_classCallCheck(this, TitleInput);

		var _this = _possibleConstructorReturn(this, (TitleInput.__proto__ || Object.getPrototypeOf(TitleInput)).call(this, props));

		_this.onKeyUp = _this.onKeyUp.bind(_this);
		_this.submit = _this.submit.bind(_this);
		return _this;
	}

	_createClass(TitleInput, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			this.titleInput.value = this.props.value;
		}
	}, {
		key: 'onKeyUp',
		value: function onKeyUp(event) {
			switch (event.keyCode) {
				case ESC_KEY:
					this.cancel(event);
					break;
				case ENTER_KEY:
					this.submit(event);
					break;
				default:
					break;
			}
		}
	}, {
		key: 'cancel',
		value: function cancel(event) {
			return this.props.onEditCancel(event, this.props.item);
		}
	}, {
		key: 'submit',
		value: function submit(event) {
			return this.props.onEditSubmit(event, {
				value: event.target.value,
				model: this.props.item
			});
		}
	}, {
		key: 'render',
		value: function render() {
			var _this2 = this;

			return _react2.default.createElement('input', {
				id: this.props.id,
				ref: function ref(input) {
					_this2.titleInput = input;
				},
				onKeyUp: this.onKeyUp,
				onBlur: this.submit,
				autoFocus: true
			});
		}
	}]);

	return TitleInput;
}(_react2.default.Component);

TitleInput.propTypes = {
	id: _react.PropTypes.string,
	value: _react.PropTypes.string,
	item: _react.PropTypes.object, // eslint-disable-line react/forbid-prop-types
	onEditSubmit: _react.PropTypes.func,
	onEditCancel: _react.PropTypes.func
};

/**
 * Item title component
 * @param {string} className the title class name
 * @param {object} item the item from list
 * @param {object} titleProps title configuration props
 * @example
const props = {
	className: 'my-title',
	item: item,
	titleProps: {
		key: 'name',                        // item.name is the title value
		iconKey: 'icon',                    // item.icon is the icon
		displayModeKey: 'display',          // item.display ('text' | 'input') set the display mode
		onClick: (event, item) => {},       // title click callback
		onEditSubmit: (event, item) => {},    // input mode validation callback
		onEditCancel: (event, item) => {},      // input mode cancellation callback
	}
}
<ItemTitle {...props} />
 */
function ItemTitle(_ref3) {
	var id = _ref3.id,
	    className = _ref3.className,
	    item = _ref3.item,
	    titleProps = _ref3.titleProps;
	var key = titleProps.key,
	    iconKey = titleProps.iconKey,
	    displayModeKey = titleProps.displayModeKey,
	    onClick = titleProps.onClick,
	    onEditSubmit = titleProps.onEditSubmit,
	    onEditCancel = titleProps.onEditCancel;

	var value = item[key];
	var displayMode = displayModeKey && item[displayModeKey] || TITLE_MODE_TEXT;
	var iconName = iconKey && item[iconKey];
	var icon = iconName && _react2.default.createElement(_Icon2.default, { className: (0, _classnames2.default)('tc-list-icon', _ItemTitle2.default.icon), name: iconName });

	var titleElement = null;
	if (displayMode === TITLE_MODE_TEXT) {
		if (onClick) {
			titleElement = _react2.default.createElement(RenderButton, {
				id: id,
				value: value,
				className: className,
				item: item,
				onClick: onClick
			});
		} else {
			titleElement = renderText({ id: id, value: value, className: className });
		}
	} else if (displayMode === TITLE_MODE_INPUT) {
		var props = { id: id, value: value, item: item, onEditSubmit: onEditSubmit, onEditCancel: onEditCancel };
		titleElement = _react2.default.createElement(TitleInput, props);
	}

	return _react2.default.createElement(
		'div',
		{ className: _ItemTitle2.default['item-title'] },
		icon,
		_react2.default.createElement(
			_TooltipTrigger2.default,
			{
				label: value && value.toString(),
				tooltipPlacement: 'top'
			},
			titleElement
		)
	);
}

ItemTitle.propTypes = {
	id: _react.PropTypes.string,
	className: _react.PropTypes.string,
	item: _react.PropTypes.object, // eslint-disable-line react/forbid-prop-types
	titleProps: _react.PropTypes.shape({
		key: _react.PropTypes.string,
		iconKey: _react.PropTypes.string,
		displayModeKey: _react.PropTypes.string,
		onClick: _react.PropTypes.func,
		onEditSubmit: _react.PropTypes.func,
		onEditCancel: _react.PropTypes.func
	}).isRequired
};

exports.default = ItemTitle;