'use strict';

exports.__esModule = true;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require('./..');

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

/**
 * @category controls
 * @component editable-textfield
 * @variations collab-ui-react
 */

var EditableTextfield = function (_React$PureComponent) {
  (0, _inherits3.default)(EditableTextfield, _React$PureComponent);

  function EditableTextfield() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, EditableTextfield);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args))), _this), _this.state = {
      isEditing: false,
      inputText: _this.props.inputText
    }, _this.componentDidUpdate = function () {
      if (_this.state.isEditing && _this.editText) {
        _this.editText.focus();
      }
    }, _this.handleDoneEditing = function (value) {
      var handleDoneEditing = _this.props.handleDoneEditing;


      _this.setState({
        isEditing: false,
        inputText: value
      });

      if (handleDoneEditing) {
        handleDoneEditing(value);
      }
    }, _this.handleClick = function () {
      var disabled = _this.props.disabled;


      if (disabled) {
        return;
      } else {
        _this.setState({
          isEditing: true
        });
      }
    }, _this.handleKey = function (e) {
      var disabled = _this.props.disabled;


      e.stopPropagation();
      e.preventDefault();

      if (disabled) {
        return;
      } else {
        _this.setState({
          isEditing: true
        });
      }
    }, _this.handleDoneKeyDown = function (e) {
      if (e.keyCode === 27) {
        _this.setState({
          isEditing: false
        });
      } else if (e.keyCode === 13) {
        _this.handleDoneEditing(e.target.value);
      }
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  EditableTextfield.prototype.render = function render() {
    var _this2 = this;

    var className = this.props.className;
    var _state = this.state,
        isEditing = _state.isEditing,
        inputText = _state.inputText;


    return _react2.default.createElement(
      'div',
      null,
      isEditing && _react2.default.createElement(_.Input, {
        className: 'cui-editable-textfield' + ' cui-editable-textfield__editing' + ('' + (className && ' ' + className || '')),
        inputRef: function inputRef(input) {
          _this2.editText = input;
        },
        defaultValue: inputText,
        htmlId: 'editText',
        name: 'editText',
        onDoneEditing: this.handleDoneEditing,
        onKeyDown: this.handleDoneKeyDown
      }),
      !isEditing && _react2.default.createElement(
        'span',
        {
          role: 'button',
          tabIndex: 0,
          className: 'cui-editable-textfield' + ' cui-editable-textfield__span' + ('' + (className && ' ' + className || '')),
          onClick: this.handleClick,
          onKeyPress: this.handleKey
        },
        inputText
      )
    );
  };

  return EditableTextfield;
}(_react2.default.PureComponent);

EditableTextfield.displayName = 'EditableTextfield';
exports.default = EditableTextfield;


EditableTextfield.defaultProps = {
  className: '',
  inputText: '',
  disabled: false,
  handleDoneEditing: null
};

/**
* @name Default EditableTextfield
* @description default
*
* @category controls
* @component editable-textfield
* @section default
*
* @js

export default class PlaygroundComponent extends React.Component {
  valueChange = (value) => {
    newValue = value;
  }

  render() {
    return (
      <div>
        <div className="docui-example docui-example--spacing" style={{padding: '16px'}}>
          <EditableTextfield inputText='Hello World' handleDoneEditing={(value) =>this.consoleChange(value)}/>
        </div>
        <div className='cui--dark docs-example--dark' style={{padding: '16px'}}>
          <EditableTextfield inputText='Hello Dark World'/>
        </div>
    </div>
    );
  }
}

**/

module.exports = exports['default'];