import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
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";

/**
 * Select.jsx
 *
 * @Author: wang yinan
 * @Date: 2018/3/08 下午5:12
 */
import React, { Fragment, Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Input from '../input';
import Tag from '../tag';
/**
 * @ignore
 * */

var TagsInput =
/*#__PURE__*/
function (_Component) {
  _inherits(TagsInput, _Component);

  function TagsInput() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, TagsInput);

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

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(TagsInput)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "handleTagClick", function (e) {
      e.stopPropagation();
    });

    _defineProperty(_assertThisInitialized(_this), "getInputRef", function (el) {
      _this.inputRef = el;
    });

    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
      var onFocus = _this.props.onFocus;

      if (onFocus) {
        onFocus(e);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
      var onBlur = _this.props.onBlur;

      if (onBlur) {
        onBlur(e);
      }
    });

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

      if (onClick) {
        onClick(e);
      }

      if (_this.inputRef) {
        _this.inputRef.focus();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "maskRender", function (props, handlers, focused) {
      var _this$props = _this.props,
          disabled = _this$props.disabled,
          tags = _this$props.tags,
          tagRender = _this$props.tagRender,
          size = _this$props.size,
          onTagDelete = _this$props.onTagDelete,
          prefixCls = _this$props.prefixCls,
          searchText = _this$props.searchText,
          placeholder = _this$props.placeholder,
          id = _this$props.id,
          readOnly = _this$props.readOnly,
          onKeyDown = _this$props.onKeyDown;
      return React.createElement("div", {
        className: "".concat(prefixCls, "-container")
      }, !tags.length && !searchText && !focused ? React.createElement("span", {
        className: "".concat(prefixCls, "-placeholder")
      }, placeholder) : React.createElement(Fragment, null, tags.map(function (tag, index) {
        return tagRender ? tagRender(tag, size, _this.handleTagClick) : React.createElement(Tag, {
          key: tag.value + index,
          closable: true,
          onDelete: function onDelete() {
            onTagDelete(tag.value);
          },
          disabled: disabled,
          size: size,
          onClick: _this.handleTagClick
        }, tag.label);
      }), React.createElement("span", {
        className: "".concat(prefixCls, "-mirror"),
        ref: _this.getMirror
      }, searchText)), React.createElement("input", _extends({
        id: id,
        readOnly: readOnly,
        className: "".concat(prefixCls, "-base ").concat(prefixCls, "-base-").concat(size),
        ref: _this.getInputRef,
        value: searchText || '',
        onKeyDown: onKeyDown
      }, handlers)));
    });

    _defineProperty(_assertThisInitialized(_this), "getMirror", function (el) {
      _this.mirrorRef = el;
    });

    return _this;
  }

  _createClass(TagsInput, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var searchText = this.props.searchText;

      if (searchText && this.inputRef && this.mirrorRef) {
        this.inputRef.style.width = "".concat(this.mirrorRef.clientWidth + 8, "px");
      } else if (this.inputRef) {
        this.inputRef.style.width = '';
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          className = _this$props2.className,
          children = _this$props2.children,
          placeholder = _this$props2.placeholder,
          tags = _this$props2.tags,
          onTagDelete = _this$props2.onTagDelete,
          size = _this$props2.size,
          defaultSearchText = _this$props2.defaultSearchText,
          searchText = _this$props2.searchText,
          searchable = _this$props2.searchable,
          tagRender = _this$props2.tagRender,
          disabled = _this$props2.disabled,
          onClick = _this$props2.onClick,
          onFocus = _this$props2.onFocus,
          id = _this$props2.id,
          readOnly = _this$props2.readOnly,
          onKeyDown = _this$props2.onKeyDown,
          maskRef = _this$props2.maskRef,
          other = _objectWithoutProperties(_this$props2, ["prefixCls", "className", "children", "placeholder", "tags", "onTagDelete", "size", "defaultSearchText", "searchText", "searchable", "tagRender", "disabled", "onClick", "onFocus", "id", "readOnly", "onKeyDown", "maskRef"]);

      return React.createElement(Input, _extends({
        className: classNames(className, _defineProperty({}, "".concat(prefixCls, "-searchable"), searchable), "".concat(prefixCls, "-").concat(size), prefixCls),
        autoComplete: "off",
        onClick: this.handleClick,
        onFocus: this.handleFocus,
        onBlur: this.handleBlur,
        "aria-haspopup": "true",
        disabled: disabled,
        value: searchText,
        maskRender: this.maskRender,
        size: size
      }, other));
    }
  }]);

  return TagsInput;
}(Component);

_defineProperty(TagsInput, "propTypes", {
  placeholder: PropTypes.node,
  tags: PropTypes.array,
  searchText: PropTypes.node,
  readOnly: PropTypes.bool,
  disabled: PropTypes.bool,
  inputProps: PropTypes.object,
  tagRender: PropTypes.func,
  size: PropTypes.oneOf(['large', 'medium', 'small', 'base']) // base === medium

});

_defineProperty(TagsInput, "defaultProps", {
  multiple: true,
  prefixCls: 'ne-tag-select-input',
  readOnly: false,
  disabled: false,
  size: 'medium',
  tags: [],
  searchText: ''
});

export default TagsInput;