"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Input = _interopRequireDefault(require("../Input"));
var _LabelledElement = _interopRequireDefault(require("../LabelledElement/LabelledElement"));
var _Text = _interopRequireDefault(require("../Text"));
var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions"));
var _AutoCompleteWithLabelSt = require("./AutoCompleteWithLabel.st.css.js");
var _AutoCompleteWithLabel2 = require("./AutoCompleteWithLabel.constants");
var _excluded = ["onFocus", "onBlur", "onChange", "className", "getPlaceholder"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AutoCompleteWithLabel/AutoCompleteWithLabel.tsx";
class AutoCompleteWithLabel extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.onSelect = option => {
      if (!option) {
        return;
      }
      var {
        value
      } = option;
      this.setState({
        value: value
      });
      this.props.onSelect(option);
      this.setState({
        isEditing: false
      });
    };
    this.onChange = event => {
      var {
        value
      } = event.target;
      this.setState({
        value,
        isEditing: true
      });
      this.props.onChange && this.props.onChange(event);
    };
    this._isInputControlled = () => typeof this.props.value !== 'undefined';
    this.state = {
      value: props.value || '',
      isEditing: false
    };
  }
  render() {
    var {
      label,
      dataHook,
      options,
      status,
      suffix,
      statusMessage,
      onFocus: _onFocus,
      name,
      type,
      ariaLabel,
      autoFocus,
      autocomplete,
      disabled,
      className,
      maxLength,
      placeholder,
      native,
      onBlur: _onBlur,
      maxHeightPixels
    } = this.props;
    var {
      value
    } = this._isInputControlled() ? this.props : this.state;
    var predicate = this.state.isEditing ? option => typeof option.value === 'string' && option.value.toLowerCase().includes(value.toLowerCase()) : () => true;
    var filteredOptions = options.filter(predicate);
    var suffixContainer = suffix ? suffix.map((item, index) => {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: _AutoCompleteWithLabelSt.classes.suffix,
        key: "".concat(dataHook, "-").concat(index),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 95,
          columnNumber: 13
        }
      }, item);
    }) : [];
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 103,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_LabelledElement.default, {
      label: label,
      dataHook: _AutoCompleteWithLabel2.DATA_HOOKS.labelledElement,
      value: value,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 104,
        columnNumber: 9
      }
    }, _ref => {
      var {
          onFocus: inputOnFocus,
          onBlur: inputOnBlur,
          onChange: inputOnChange,
          className: inputClassName,
          getPlaceholder
        } = _ref,
        rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
      return /*#__PURE__*/_react.default.createElement(_InputWithOptions.default, (0, _extends2.default)({
        onChange: e => {
          inputOnChange(e);
          this.onChange(e);
        },
        onSelect: this.onSelect,
        dataHook: _AutoCompleteWithLabel2.DATA_HOOKS.inputWithOptions,
        hideStatusSuffix: true,
        onFocus: e => {
          inputOnFocus();
          _onFocus == null || _onFocus(e);
        },
        onBlur: e => {
          inputOnBlur();
          _onBlur == null || _onBlur(e);
        },
        size: "large",
        autocomplete: autocomplete,
        inputElement: /*#__PURE__*/_react.default.createElement(_Input.default, {
          name: name,
          type: type,
          ariaLabel: ariaLabel,
          autoFocus: autoFocus,
          disabled: disabled,
          maxLength: maxLength,
          placeholder: getPlaceholder(placeholder),
          dataHook: _AutoCompleteWithLabel2.DATA_HOOKS.inputWithLabel,
          value: value,
          className: (0, _AutoCompleteWithLabelSt.st)(inputClassName, className),
          suffix: suffixContainer,
          status: status,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 136,
            columnNumber: 17
          }
        }),
        options: filteredOptions,
        native: native,
        maxHeightPixels: maxHeightPixels
      }, rest, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 117,
          columnNumber: 13
        }
      }));
    }), status === _Input.default.StatusError && statusMessage && /*#__PURE__*/_react.default.createElement(_Text.default, {
      skin: "error",
      weight: "normal",
      size: "small",
      className: _AutoCompleteWithLabelSt.classes.statusMessage,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 159,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: _AutoCompleteWithLabelSt.classes.statusMessageIcon,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 165,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertSmall, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 166,
        columnNumber: 15
      }
    })), /*#__PURE__*/_react.default.createElement("span", {
      "data-hook": _AutoCompleteWithLabel2.DATA_HOOKS.errorMessage,
      className: _AutoCompleteWithLabelSt.classes.errorMessageContent,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 168,
        columnNumber: 13
      }
    }, statusMessage)));
  }
}
AutoCompleteWithLabel.displayName = 'AutoCompleteWithLabel';
AutoCompleteWithLabel.defaultProps = {
  autocomplete: 'on',
  label: '',
  options: [],
  onSelect: () => {}
};
var _default = exports.default = AutoCompleteWithLabel;
//# sourceMappingURL=AutoCompleteWithLabel.js.map