"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Tag = _interopRequireDefault(require("../Tag/Tag"));
var _Input = _interopRequireDefault(require("../Input"));
var _InputWithTagsSt = require("./InputWithTags.st.css.js");
var _classnames = _interopRequireDefault(require("classnames"));
var _SortableListBase = _interopRequireDefault(require("../SortableListBase/SortableListBase"));
var _dndStyles = _interopRequireDefault(require("../dnd-styles"));
var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));
var _StatusContext = require("../FormField/StatusContext");
var _system = require("@wix/wix-ui-icons-common/system");
var _IconThemeContext = require("../WixDesignSystemIconThemeProvider/IconThemeContext");
var _excluded = ["tags", "onRemoveTag", "onReorder", "placeholder", "status", "statusMessage", "disabled", "readOnly", "delimiters", "mode", "size", "border", "className"],
  _excluded2 = ["onManuallyInput", "inputElement", "closeOnSelect", "predicate", "onClickOutside", "fixedHeader", "fixedFooter", "dataHook", "onFocus", "withSelection", "onBlur", "menuArrow", "onInputClicked"],
  _excluded3 = ["label"],
  _excluded4 = ["id", "label"],
  _excluded5 = ["item", "previewStyles", "isPlaceholder", "isPreview"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MultiSelect/InputWithTags.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var InputWithTags = /*#__PURE__*/function (_React$Component) {
  function InputWithTags(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, InputWithTags);
    _this = _callSuper(this, InputWithTags, [props]);
    _this.focus = _this.focus.bind(_this);
    _this.blur = _this.blur.bind(_this);
    _this.select = _this.select.bind(_this);
    _this.renderReorderableTag = _this.renderReorderableTag.bind(_this);
    _this.handleClick = _this.handleClick.bind(_this);
    _this.handleInputFocus = _this.handleInputFocus.bind(_this);
    _this.handleInputBlur = _this.handleInputBlur.bind(_this);
    _this.state = {
      inputValue: '',
      inputHasFocus: false
    };
    return _this;
  }
  (0, _inherits2["default"])(InputWithTags, _React$Component);
  return (0, _createClass2["default"])(InputWithTags, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.autoFocus && this.props.onFocus();
    }
  }, {
    key: "handleClick",
    value: function handleClick(e) {
      if (!this.props.disabled) {
        this.input.focus();
        this.props.onInputClicked && this.props.onInputClicked(e);
      }
    }
  }, {
    key: "handleInputFocus",
    value: function handleInputFocus(e) {
      this.setState({
        inputHasFocus: true
      });
      this.props.onFocus && this.props.onFocus(e);
    }
  }, {
    key: "handleInputBlur",
    value: function handleInputBlur(e) {
      this.setState({
        inputHasFocus: false
      });
      this.props.onBlur && this.props.onBlur(e);
    }
  }, {
    key: "_isSelectMode",
    value: function _isSelectMode() {
      return this.props.mode === 'select';
    }
  }, {
    key: "_hasFocus",
    value: function _hasFocus() {
      return this.state.inputHasFocus && !this.props.disabled;
    }
  }, {
    key: "_getRootClassName",
    value: function _getRootClassName() {
      var _this$props = this.props,
        status = _this$props.status,
        disabled = _this$props.disabled,
        readOnly = _this$props.readOnly,
        _this$props$size = _this$props.size,
        size = _this$props$size === void 0 ? 'medium' : _this$props$size,
        border = _this$props.border,
        className = _this$props.className;
      var appliedClasses = [className, this._isSelectMode() && _InputWithTagsSt.classes.selectMode].filter(Boolean);
      return _InputWithTagsSt.st.apply(void 0, [_InputWithTagsSt.classes.root, {
        border: border,
        disabled: disabled,
        hasFocus: this._hasFocus(),
        status: (0, _StatusContext.getStatusFromContext)(this.context, status),
        readOnly: readOnly,
        size: size
      }].concat((0, _toConsumableArray2["default"])(appliedClasses)));
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props2 = this.props,
        tags = _this$props2.tags,
        onRemoveTag = _this$props2.onRemoveTag,
        onReorder = _this$props2.onReorder,
        placeholder = _this$props2.placeholder,
        status = _this$props2.status,
        statusMessage = _this$props2.statusMessage,
        disabled = _this$props2.disabled,
        readOnly = _this$props2.readOnly,
        delimiters = _this$props2.delimiters,
        mode = _this$props2.mode,
        _this$props2$size = _this$props2.size,
        size = _this$props2$size === void 0 ? 'medium' : _this$props2$size,
        border = _this$props2.border,
        className = _this$props2.className,
        inputProps = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
      var onManuallyInput = inputProps.onManuallyInput,
        inputElement = inputProps.inputElement,
        closeOnSelect = inputProps.closeOnSelect,
        predicate = inputProps.predicate,
        onClickOutside = inputProps.onClickOutside,
        fixedHeader = inputProps.fixedHeader,
        fixedFooter = inputProps.fixedFooter,
        dataHook = inputProps.dataHook,
        onFocus = inputProps.onFocus,
        withSelection = inputProps.withSelection,
        onBlur = inputProps.onBlur,
        menuArrow = inputProps.menuArrow,
        onInputClicked = inputProps.onInputClicked,
        desiredProps = (0, _objectWithoutProperties2["default"])(inputProps, _excluded2);
      var rowMultiplier;
      if (tags.length && tags[0].size === 'large') {
        rowMultiplier = 47;
      } else {
        rowMultiplier = 35;
      }
      var maxHeight = this.props.maxHeight || this.props.maxNumRows * rowMultiplier || 'initial';
      var finalStatus = (0, _StatusContext.getStatusFromContext)(this.context, status);
      return /*#__PURE__*/_react["default"].createElement(_IconThemeContext.IconThemeContext.Consumer, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 141,
          columnNumber: 7
        }
      }, function (_ref) {
        var _icons$InputWithTags;
        var _ref$icons = _ref.icons,
          icons = _ref$icons === void 0 ? {} : _ref$icons;
        var DropDownArrowIcon = ((_icons$InputWithTags = icons.InputWithTags) == null ? void 0 : _icons$InputWithTags.DropDownArrow) || _system.DropDownArrow;
        return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
          className: _this2._getRootClassName(),
          style: {
            maxHeight: maxHeight
          },
          onClick: _this2.handleClick,
          "data-hook": _this2.props.dataHook,
          "data-focus": _this2._hasFocus() || null,
          "data-status": finalStatus
        }, (0, _StatusContext.getAriaAttributesFromContext)(_this2.context), {
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 147,
            columnNumber: 13
          }
        }), /*#__PURE__*/_react["default"].createElement("div", {
          className: _InputWithTagsSt.classes.scrollableContent,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 156,
            columnNumber: 15
          }
        }, _this2.props.customPrefix && !_this2.props.hideCustomSuffix && !_this2.state.inputHasFocus && /*#__PURE__*/_react["default"].createElement("span", {
          "data-hook": "custom-prefix",
          className: _InputWithTagsSt.classes.customPrefix,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 160,
            columnNumber: 21
          }
        }, _this2.props.customPrefix), onReorder ? /*#__PURE__*/_react["default"].createElement(_SortableListBase["default"], {
          contentClassName: _InputWithTagsSt.classes.tagsContainer,
          items: tags,
          onDrop: onReorder,
          renderItem: _this2.renderReorderableTag,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 168,
            columnNumber: 19
          }
        }) : tags.map(function (_ref2) {
          var label = _ref2.label,
            rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
          return /*#__PURE__*/_react["default"].createElement(_Tag["default"], (0, _extends2["default"])({
            key: rest.id,
            dataHook: "tag",
            disabled: disabled,
            onRemove: onRemoveTag,
            removable: !readOnly
          }, rest, {
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 176,
              columnNumber: 21
            }
          }), label);
        }), /*#__PURE__*/_react["default"].createElement("span", {
          className: (0, _classnames["default"])(_InputWithTagsSt.classes.inputWrapper, !tags.length),
          "data-hook": "inner-input-with-tags",
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 189,
            columnNumber: 17
          }
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: (0, _classnames["default"])(_InputWithTagsSt.classes.hiddenDiv),
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 193,
            columnNumber: 19
          }
        }, _this2.state.inputValue), /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({
          className: _InputWithTagsSt.classes.input,
          size: size,
          width: _this2.props.width,
          ref: function ref(input) {
            _this2.input = input;
          },
          onFocus: _this2.handleInputFocus,
          onBlur: _this2.handleInputBlur,
          placeholder: tags.length === 0 ? placeholder : ''
        }, desiredProps, {
          dataHook: "inputWithTags-input",
          disabled: disabled,
          readOnly: readOnly,
          disableEditing: _this2._isSelectMode(),
          onChange: function onChange(e) {
            if (!delimiters.includes(e.target.value)) {
              _this2.setState({
                inputValue: e.target.value
              });
              desiredProps.onChange && desiredProps.onChange(e);
            }
          },
          withSelection: true,
          prefix: _this2.props.customSuffix && !_this2.props.hideCustomSuffix && !_this2.state.inputHasFocus && /*#__PURE__*/_react["default"].createElement("span", {
            "data-hook": "custom-suffix",
            className: _InputWithTagsSt.classes.customSuffix,
            __self: _this2,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 223,
              columnNumber: 25
            }
          }, _this2.props.customSuffix),
          hideStatusSuffix: true,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 197,
            columnNumber: 19
          }
        })))), /*#__PURE__*/_react["default"].createElement("div", {
          className: _InputWithTagsSt.classes.inputSuffix,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 237,
            columnNumber: 15
          }
        }, !disabled && (['error', 'warning', 'loading'].includes(status) || finalStatus === 'loading') && /*#__PURE__*/_react["default"].createElement("div", {
          className: _InputWithTagsSt.classes.statusIndicator,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 242,
            columnNumber: 21
          }
        }, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
          status: finalStatus,
          message: statusMessage,
          dataHook: "input-status",
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 243,
            columnNumber: 23
          }
        })), _this2._isSelectMode() && /*#__PURE__*/_react["default"].createElement("div", {
          className: _InputWithTagsSt.classes.menuArrow,
          "data-hook": "input-menu-arrow",
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 253,
            columnNumber: 19
          }
        }, /*#__PURE__*/_react["default"].createElement(DropDownArrowIcon, {
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 257,
            columnNumber: 21
          }
        }))));
      });
    }
  }, {
    key: "renderReorderableTag",
    value: function renderReorderableTag(_ref3) {
      var _ref3$item = _ref3.item,
        id = _ref3$item.id,
        label = _ref3$item.label,
        itemProps = (0, _objectWithoutProperties2["default"])(_ref3$item, _excluded4),
        previewStyles = _ref3.previewStyles,
        isPlaceholder = _ref3.isPlaceholder,
        isPreview = _ref3.isPreview,
        rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded5);
      var _this$props3 = this.props,
        onRemoveTag = _this$props3.onRemoveTag,
        disabled = _this$props3.disabled,
        readOnly = _this$props3.readOnly;
      var _classes = (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _dndStyles["default"].itemPlaceholder, isPlaceholder), _InputWithTagsSt.classes.draggedTagPlaceholder, isPlaceholder), _dndStyles["default"].itemPreview, isPreview), _InputWithTagsSt.classes.draggedTag, isPreview));
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: previewStyles,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 284,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], (0, _extends2["default"])({
        id: id,
        dataHook: "tag",
        disabled: disabled,
        className: _classes,
        onRemove: onRemoveTag,
        removable: !readOnly
      }, itemProps, rest, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 285,
          columnNumber: 9
        }
      }), label));
    }
  }, {
    key: "focus",
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: "blur",
    value: function blur() {
      this.input.blur();
    }
  }, {
    key: "select",
    value: function select() {
      this.input.select();
    }
  }, {
    key: "clear",
    value: function clear() {
      this.input.clear();
    }
  }]);
}(_react["default"].Component);
InputWithTags.contextType = _StatusContext.StatusContext;
InputWithTags.defaultProps = {
  onRemoveTag: function onRemoveTag() {},
  tags: [],
  placeholder: '',
  delimiters: []
};
var _default = exports["default"] = InputWithTags;