import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.keys";
import "core-js/modules/es6.object.assign";

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { omit } from 'lodash';
import { Input } from "./..";
/**
 * @category controls
 * @component editable-textfield
 * @variations collab-ui-react
 */

var EditableTextfield =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(EditableTextfield, _React$Component);

  function EditableTextfield() {
    var _this;

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

    _this = _React$Component.call.apply(_React$Component, [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.handleEnter = function (e, value) {
      var handleDoneEditing = _this.props.handleDoneEditing;
      e.persist();

      _this.setState({
        isEditing: false,
        inputText: value
      }, function () {
        return handleDoneEditing && handleDoneEditing(e, {
          value: value
        });
      });

      e.nativeEvent.stopImmediatePropagation();
    };

    _this.handleBlur = function (e, value) {
      var handleDoneEditing = _this.props.handleDoneEditing;
      e.persist();

      _this.setState({
        isEditing: false,
        inputText: value
      }, function () {
        return handleDoneEditing && handleDoneEditing(e, {
          value: value
        });
      });
    };

    _this.handleEsc = function (e) {
      _this.setState({
        isEditing: false
      });

      e.nativeEvent.stopImmediatePropagation();
    };

    _this.handleClick = function () {
      var disabled = _this.props.disabled;

      if (disabled) {
        return;
      } else {
        _this.setState({
          isEditing: true
        });
      }
    };

    _this.handleKey = function () {
      var disabled = _this.props.disabled;

      if (disabled) {
        return;
      } else {
        _this.setState({
          isEditing: true
        });
      }
    };

    _this.handleDoneKeyDown = function (e) {
      if (e.keyCode === 27) {
        _this.handleEsc(e);
      } else if (e.keyCode === 13) {
        _this.handleEnter(e, e.target.value);
      }
    };

    return _this;
  }

  var _proto = EditableTextfield.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        alignment = _this$props.alignment,
        buttonClassName = _this$props.buttonClassName,
        buttonProps = _this$props.buttonProps,
        className = _this$props.className,
        props = _objectWithoutPropertiesLoose(_this$props, ["alignment", "buttonClassName", "buttonProps", "className"]);

    var _this$state = this.state,
        isEditing = _this$state.isEditing,
        inputText = _this$state.inputText;
    var inputProps = omit(Object.assign({}, props), ['disabled', 'handleDoneEditing', 'inputText']);
    return React.createElement("span", {
      className: 'cui-editable-textfield' + ("" + (alignment && " cui-editable-textfield--" + alignment || ''))
    }, isEditing && React.createElement(Input, _extends({
      className: 'cui-editable-textfield__editing' + ("" + (className && " " + className || '')),
      inputRef: function inputRef(input) {
        _this2.editText = input;
      },
      onDoneEditing: this.handleBlur,
      onKeyDown: this.handleDoneKeyDown,
      value: inputText
    }, inputProps)), !isEditing && React.createElement("div", _extends({
      role: "button",
      tabIndex: 0,
      className: 'cui-editable-textfield__button' + ("" + (buttonClassName && " " + buttonClassName || '')),
      onClick: this.handleClick,
      onKeyPress: this.handleKey
    }, buttonProps), inputText || "\xA0"));
  };

  return EditableTextfield;
}(React.Component);

EditableTextfield.displayName = 'EditableTextfield';
EditableTextfield.propTypes = {
  /**
   * alignment modifier
   */
  alignment: PropTypes.oneOf(['center', 'left', 'right']),

  /**
   * optional props for internal button
   */
  buttonProps: PropTypes.shape({}),

  /**
   * optional css class name for internal button
   */
  buttonClassName: PropTypes.string,

  /**
   * css class names
   */
  className: PropTypes.string,

  /**
   * optional disable
   */
  disabled: PropTypes.bool,

  /**
   * optional function for blur
   */
  handleDoneEditing: PropTypes.func,

  /**
   * text to be shown
   */
  inputText: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
EditableTextfield.defaultProps = {
  alignment: 'left',
  buttonClassName: '',
  buttonProps: null,
  className: '',
  disabled: false,
  handleDoneEditing: null,
  inputText: ''
};
export default EditableTextfield;
/**
* @name Default EditableTextfield
*
* @category controls
* @component editable-textfield
* @section default
*
* @js

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

  render() {
    return (
      <div className='row'>
        <div className="docs-example docs-example--spacing">

          <h3>
            Props
            <p><code className="small">inputText=(Hello World)</code></p>
            <p><code className="small">{'handleDoneEditing=({(value) => console.log(value)})'}</code></p>
          </h3>
          <div style={{ width: '80%', margin: '0 auto' }}>
            <EditableTextfield
              handleDoneEditing={(e, data) => console.log(e, data)}
              inputText='Hello World'
            />
          </div>

        </div>
        <div className="cui--dark docs-example docs-example--spacing docs-example--dark">

          <h3>
            Props
            <p><code className="small">inputText=(Hello Dark World)</code></p>
            <p><code className="small">alignment=('center')</code></p>
          </h3>
          <div style={{ width: '80%', margin: '0 auto' }}>
            <EditableTextfield alignment='center' inputText='Hello Dark World'/>
          </div>

        </div>
    </div>
    );
  }
}

**/