"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 _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 _InputWithOptions2 = _interopRequireDefault(require("../InputWithOptions"));
var _Input = _interopRequireDefault(require("../Input"));
var _MultiSelectCheckboxSt = require("./MultiSelectCheckbox.st.css.js");
var _ListItemSelect = require("../ListItemSelect");
var _ListItemSection = require("../ListItemSection");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MultiSelectCheckbox/MultiSelectCheckbox.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 OPEN_DROPDOWN_CHARS = ['Enter', 'ArrowDown', 'Space', ' '];
var MultiSelectCheckbox = /*#__PURE__*/function (_InputWithOptions) {
  function MultiSelectCheckbox() {
    (0, _classCallCheck2["default"])(this, MultiSelectCheckbox);
    return _callSuper(this, MultiSelectCheckbox, arguments);
  }
  (0, _inherits2["default"])(MultiSelectCheckbox, _InputWithOptions);
  return (0, _createClass2["default"])(MultiSelectCheckbox, [{
    key: "createOptions",
    value: function createOptions(options) {
      var _this = this;
      return options.map(function (option) {
        if (_this._isUsingCustomRenderFunction(option)) {
          return _this._patchOptionWithSelectionMechanism(option);
        } else if (_this._isDivider(option)) {
          return (0, _ListItemSection.listItemSectionBuilder)(_objectSpread({
            type: 'divider'
          }, option));
        } else {
          var builder = (0, _ListItemSelect.listItemSelectBuilder)(_objectSpread(_objectSpread({}, option), {}, {
            checkbox: true,
            title: option.value,
            label: option.label
          }));
          return _this._patchOptionWithSelectionMechanism(builder);
        }
      });
    }
  }, {
    key: "_patchOptionWithSelectionMechanism",
    value: function _patchOptionWithSelectionMechanism(option) {
      var _this2 = this;
      var _value = option.value;
      return _objectSpread(_objectSpread({}, option), {}, {
        value: function value(props) {
          return _value(_objectSpread(_objectSpread({}, props), {}, {
            selected: _this2.isSelectedId(option.id)
          }));
        }
      });
    }
  }, {
    key: "_isUsingCustomRenderFunction",
    value: function _isUsingCustomRenderFunction(_ref) {
      var value = _ref.value;
      return typeof value === 'function';
    }
  }, {
    key: "_isDivider",
    value: function _isDivider(_ref2) {
      var value = _ref2.value;
      return value === '-';
    }
  }, {
    key: "isSelectedId",
    value: function isSelectedId(optionId) {
      return this.props.selectedOptions.indexOf(optionId) !== -1;
    }
  }, {
    key: "dropdownAdditionalProps",
    value: function dropdownAdditionalProps() {
      var _this$props = this.props,
        predicate = _this$props.predicate,
        emptyStateMessage = _this$props.emptyStateMessage,
        enableSearch = _this$props.enableSearch;
      var filterFunc = this.state.isEditing ? predicate : function () {
        return true;
      };
      var options = enableSearch ? this.createOptions(this.props.options.filter(filterFunc)) : this.createOptions(this.props.options);
      if (options.length === 0 && emptyStateMessage) {
        options = [{
          id: 'empty-state-message',
          value: emptyStateMessage,
          disabled: true
        }];
      }
      return {
        options: options,
        closeOnSelect: false,
        selectedHighlight: false
      };
    }
  }, {
    key: "selectedOptionsToText",
    value: function selectedOptionsToText() {
      var _this3 = this;
      return this.props.selectedOptions.map(function (selectedOption) {
        return _this3.props.options.find(function (option) {
          return option.id === selectedOption;
        });
      }).filter(function (selectedOption) {
        return selectedOption;
      }).map(this.props.valueParser).join(this.props.delimiter);
    }
  }, {
    key: "inputAdditionalProps",
    value: function inputAdditionalProps() {
      if (this.props.enableSearch) {
        var _this$props2 = this.props,
          selectedOptions = _this$props2.selectedOptions,
          getSelectedOptionsText = _this$props2.getSelectedOptionsText;
        var selectedOptionsText = !!getSelectedOptionsText ? getSelectedOptionsText(selectedOptions.length) : this.selectedOptionsToText();
        var value = !this._focused && selectedOptions.length > 0 ? selectedOptionsText : this.props.value;
        return {
          readOnly: this.props.readOnly,
          disableEditing: false,
          value: value,
          placeholder: selectedOptions.length > 0 ? selectedOptionsText : this.props.placeholder
        };
      } else {
        var _this$props$inputElem;
        var _value2 = this.props.value !== undefined ? this.props.value : this.selectedOptionsToText();
        return {
          readOnly: this.props.readOnly,
          disableEditing: this.props.disableEditing,
          inputElement: (_this$props$inputElem = this.props.inputElement) !== null && _this$props$inputElem !== void 0 ? _this$props$inputElem : /*#__PURE__*/_react["default"].createElement(_Input["default"], {
            textOverflow: "ellipsis",
            disableEditing: this.props.disableEditing,
            __self: this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 120,
              columnNumber: 11
            }
          }),
          value: _value2
        };
      }
    }
  }, {
    key: "inputClasses",
    value: function inputClasses() {
      return this.props.enableSearch ? '' : _MultiSelectCheckboxSt.classes.showPointer;
    }
  }, {
    key: "_onSelect",
    value: function _onSelect(option) {
      this.showOptions();
      if (this.closeOnSelect()) {
        this.setState({
          showOptions: false
        });
      }

      // The option object is not the original since it was injected a checkbox
      var originalOption = this.props.options.find(function (op) {
        return option.id === op.id;
      });
      if (this.isSelectedId(originalOption.id)) {
        this.props.onDeselect && this.props.onDeselect(originalOption.id, originalOption);
      } else {
        this.props.onSelect && this.props.onSelect(originalOption.id, originalOption);
      }
      if (this.props.enableSearch && this.props.onChange) {
        this.props.onChange({
          target: {
            value: ''
          }
        });
        this.setState({
          isEditing: false
        });
      }
    }
  }, {
    key: "_onOpenChange",
    value: function _onOpenChange(event) {
      if (!this.props.readOnly) {
        this.state.showOptions ? this.hideOptions() : this.showOptions();
      }
    }
  }, {
    key: "_onKeyDown",
    value: function _onKeyDown(event) {
      if (OPEN_DROPDOWN_CHARS.includes(event.key) && !(this.state.isEditing && event.key === ' ')) {
        event.preventDefault();
        this.showOptions();
      } else if (this.props.enableSearch && event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
        this.setState({
          isEditing: true
        });
      }
      this.dropdownLayout && this.dropdownLayout._onSelectListKeyDown(event);
    }
  }, {
    key: "_onFocus",
    value: function _onFocus(e) {
      if (this.props.disabled) {
        return;
      }
      this._focused = true;
      if (this.props.onFocus) {
        this.props.onFocus(e);
        this.setState({
          isEditing: false
        });
      }
    }
  }]);
}(_InputWithOptions2["default"]);
MultiSelectCheckbox.displayName = 'MultiSelectCheckbox';
MultiSelectCheckbox.defaultProps = _objectSpread(_objectSpread({}, _InputWithOptions2["default"].defaultProps), {}, {
  delimiter: ', ',
  selectedOptions: [],
  closeOnSelect: false,
  valueParser: function valueParser(option) {
    return option.label || option.value;
  },
  readOnly: false,
  disableEditing: true,
  clearOnBlur: true,
  predicate: function predicate() {
    return true;
  },
  enableSearch: false
});
var _default = exports["default"] = MultiSelectCheckbox;