import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

/**
 * tag.jsx
 *
 * @Author: zhangce
 * @Date: 17/8/23 上午11:36
 */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Close from '../icons/internals/Close';
/**
 * Tag
 * */

var Tag =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Tag, _React$PureComponent);

  function Tag(props, context) {
    var _this;

    _classCallCheck(this, Tag);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Tag).call(this, props, context));

    _defineProperty(_assertThisInitialized(_this), "onDelete", function (e) {
      var _this$props = _this.props,
          onDelete = _this$props.onDelete,
          disabled = _this$props.disabled,
          transitionDuration = _this$props.transitionDuration,
          afterClose = _this$props.afterClose,
          onClose = _this$props.onClose,
          children = _this$props.children;
      var handleClose = onDelete || onClose;

      if (handleClose && !disabled) {
        handleClose(children);
      }

      if (e.defaultPrevented || disabled) {
        return;
      }

      _this.setState({
        closing: true
      });

      setTimeout(function () {
        if (_this.unMount) {
          _this.setState({
            isClosed: true
          });
        }

        if (afterClose) {
          afterClose();
        }
      }, transitionDuration);
    });

    _defineProperty(_assertThisInitialized(_this), "showInput", function (e) {
      var onClick = _this.props.onClick;

      if (onClick) {
        onClick(e);
      }

      _this.setState(function (state) {
        return {
          showInput: !state.showInput
        };
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onInputBlur", function () {
      var _this$props2 = _this.props,
          onCreate = _this$props2.onCreate,
          onInput = _this$props2.onInput;
      var inputValue = _this.state.inputValue;
      var showInput = false;

      if (inputValue === '') {
        showInput = false;
      } else if (onCreate) {
        showInput = !onCreate(inputValue);
      } else if (onInput) {
        showInput = !onInput(inputValue);
      }

      if (!showInput) {
        _this.setState({
          showInput: showInput,
          inputValue: ''
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
      _this.setState({
        inputValue: e.target.value
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
      var enterKey = _this.props.enterKey;
      var charCode = e.which ? e.which : e.keyCode;

      if (enterKey.indexOf(charCode) !== -1) {
        e.preventDefault();

        _this.onInputBlur();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "getInputElement", function (el) {
      _this.createInput = el;
    });

    _this.state = {
      isClosed: false,
      showInput: false,
      inputValue: '',
      closing: false
    };
    return _this;
  }

  _createClass(Tag, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var showInput = this.state.showInput;

      if (showInput) {
        this.createInput && this.createInput.focus();
      }
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      this.unMount = true;
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$state = this.state,
          isClosed = _this$state.isClosed,
          showInput = _this$state.showInput,
          inputValue = _this$state.inputValue,
          closing = _this$state.closing;

      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          children = _this$props3.children,
          closable = _this$props3.closable,
          isAddableTag = _this$props3.isAddableTag,
          input = _this$props3.input,
          className = _this$props3.className,
          onClick = _this$props3.onClick,
          onInput = _this$props3.onInput,
          onCreate = _this$props3.onCreate,
          onDelete = _this$props3.onDelete,
          type = _this$props3.type,
          disabled = _this$props3.disabled,
          afterClose = _this$props3.afterClose,
          enterKey = _this$props3.enterKey,
          title = _this$props3.title,
          color = _this$props3.color,
          size = _this$props3.size,
          transitionDuration = _this$props3.transitionDuration,
          other = _objectWithoutProperties(_this$props3, ["prefixCls", "children", "closable", "isAddableTag", "input", "className", "onClick", "onInput", "onCreate", "onDelete", "type", "disabled", "afterClose", "enterKey", "title", "color", "size", "transitionDuration"]);

      var closeBtn = closable && !isAddableTag && !input ? React.createElement(Close, {
        className: "".concat(prefixCls, "-icon-close"),
        size: "small",
        onClick: this.onDelete
      }) : null;
      var classString = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(color), color), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-create"), isAddableTag || input), _defineProperty(_classNames, "".concat(prefixCls, "-create-active"), (isAddableTag || input) && showInput), _defineProperty(_classNames, "".concat(prefixCls, "-closing"), closing), _classNames), "".concat(prefixCls, "-").concat(size), className);
      var tag = isClosed ? null : React.createElement("div", _extends({
        className: classString,
        onClick: isAddableTag || input ? this.showInput : onClick
      }, other), (isAddableTag || input) && showInput ? React.createElement("input", {
        disabled: disabled,
        className: "".concat(prefixCls, "-input"),
        ref: this.getInputElement,
        value: inputValue,
        onChange: this.handleChange,
        onKeyDown: this.onKeyDown,
        onBlur: this.onInputBlur
      }) : React.createElement("span", {
        className: "".concat(prefixCls, "-content"),
        title: title
      }, children), closeBtn);
      return tag;
    }
  }]);

  return Tag;
}(React.PureComponent);

_defineProperty(Tag, "propTypes", {
  /**
   * 类前缀
   * */
  prefixCls: PropTypes.string,

  /**
   * 类名
   * */
  className: PropTypes.string,

  /**
   * 标签类型
   * */
  color: PropTypes.string,

  /**
   * 是否禁用
   * */
  disabled: PropTypes.bool,

  /**
   * 是否可关闭标签
   * */
  closable: PropTypes.bool,

  /**
   * 标签是否为创建标签
   * */
  input: PropTypes.bool,

  /**
   * 删除动画结束
   * */
  afterClose: PropTypes.func,

  /**
   * 点击删除标签回调
   * */
  onClose: PropTypes.func,

  /**
   * 点击标签回调
   * */
  onClick: PropTypes.func,

  /**
   * 添加标签回调
   * */
  onCreate: PropTypes.func,

  /**
   * 创建新标签的键值
   * */
  enterKey: PropTypes.array,

  /**
   * 提示信息
   * */
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  transitionDuration: PropTypes.number
});

_defineProperty(Tag, "defaultProps", {
  prefixCls: 'ne-tag',
  closable: false,
  size: 'medium',
  enterKey: [13],
  transitionDuration: 200
});

export default Tag;