Liferay.Loader.define("commerce-bom-admin-web@4.0.30/js/components/EditNumberForm.es", ['module', 'exports', 'require', 'frontend-js-react-web$react', './StoreContext.es', './utilities/HighlightedText.es', './utilities/Icon.es'], function (module, exports, require) {
  var define = undefined;
  var global = window;
  {
    function _typeof(obj) {
      "@babel/helpers - typeof";
      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
        _typeof = function _typeof(obj) {
          return typeof obj;
        };
      } else {
        _typeof = function _typeof(obj) {
          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
        };
      }return _typeof(obj);
    }

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.DropdownItem = DropdownItem;
    exports.DropdownInput = DropdownInput;
    exports.default = void 0;

    var _react = _interopRequireWildcard(require("frontend-js-react-web$react"));

    var _StoreContext = require("./StoreContext.es");

    var _HighlightedText = _interopRequireDefault(require("./utilities/HighlightedText.es"));

    var _Icon = _interopRequireDefault(require("./utilities/Icon.es"));

    function _interopRequireDefault(obj) {
      return obj && obj.__esModule ? obj : { default: obj };
    }

    function _getRequireWildcardCache() {
      if (typeof WeakMap !== "function") return null;var cache = new WeakMap();_getRequireWildcardCache = function _getRequireWildcardCache() {
        return cache;
      };return cache;
    }

    function _interopRequireWildcard(obj) {
      if (obj && obj.__esModule) {
        return obj;
      }if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") {
        return { default: obj };
      }var cache = _getRequireWildcardCache();if (cache && cache.has(obj)) {
        return cache.get(obj);
      }var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {
            Object.defineProperty(newObj, key, desc);
          } else {
            newObj[key] = obj[key];
          }
        }
      }newObj.default = obj;if (cache) {
        cache.set(obj, newObj);
      }return newObj;
    }

    function _slicedToArray(arr, i) {
      return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
    }

    function _nonIterableRest() {
      throw new TypeError("Invalid attempt to destructure non-iterable instance");
    }

    function _iterableToArrayLimit(arr, i) {
      if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
        return;
      }var _arr = [];var _n = true;var _d = false;var _e = undefined;try {
        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
          _arr.push(_s.value);if (i && _arr.length === i) break;
        }
      } catch (err) {
        _d = true;_e = err;
      } finally {
        try {
          if (!_n && _i["return"] != null) _i["return"]();
        } finally {
          if (_d) throw _e;
        }
      }return _arr;
    }

    function _arrayWithHoles(arr) {
      if (Array.isArray(arr)) return arr;
    }

    function DropdownItem(props) {
      return (/*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
          className: "dropdown-item",
          href: "#".concat(props.value),
          onClick: function onClick(e) {
            return props.handleClickFn(e, props.value);
          }
        }, /*#__PURE__*/_react.default.createElement(_HighlightedText.default, {
          inverted: false,
          query: props.query,
          text: props.label
        })))
      );
    }

    function DropdownInput(props) {
      return (/*#__PURE__*/_react.default.createElement("div", {
          className: "dropdown-full input-group-item"
        }, /*#__PURE__*/_react.default.createElement("input", {
          autoComplete: "off",
          className: "form-control input-group-inset input-group-inset-after",
          disabled: props.disabled,
          id: props.inputId || null,
          onChange: props.handleChangeFn,
          placeholder: props.inputPlaceholder,
          type: "text",
          value: props.query || ''
        }), !props.disabled && /*#__PURE__*/_react.default.createElement("span", {
          className: "input-group-inset-item input-group-inset-item-after"
        }, !props.query ? /*#__PURE__*/_react.default.createElement("span", {
          className: "btn btn-unstyled".concat(props.searchAdditionalCssClasses ? " ".concat(props.searchAdditionalCssClasses) : '')
        }, props.searchIcon) : /*#__PURE__*/_react.default.createElement("button", {
          className: "btn btn-unstyled".concat(props.resetAdditionalCssClasses ? " ".concat(props.resetAdditionalCssClasses) : ''),
          onClick: props.handleResetFn,
          type: "button"
        }, props.resetIcon)), props.elements && props.elements.length ? /*#__PURE__*/_react.default.createElement("ul", {
          className: "dropdown-menu show"
        }, props.elements.map(function (el, i) {
          return (/*#__PURE__*/_react.default.createElement(DropdownItem, {
              handleClickFn: props.handleClickOnItem,
              key: i,
              label: el.label,
              query: props.query,
              value: el.value
            })
          );
        })) : null)
      );
    }

    var EditNumberForm = /*#__PURE__*/_react.default.memo(function (props) {
      var _React$useContext = _react.default.useContext(_StoreContext.StoreContext),
          actions = _React$useContext.actions,
          state = _React$useContext.state;

      var formData = state.area.spotFormData || {};
      var position = formData.position || {};

      var _useState = (0, _react.useState)(false),
          _useState2 = _slicedToArray(_useState, 2),
          dropdownDisabled = _useState2[0],
          disableDropdown = _useState2[1];

      var inputPlaceholder = Liferay.Language.get('search-for-product-name-or-sku');

      function isNumberAlreadyAdded(number) {
        return state.area.spots.reduce(function (acc, el) {
          return acc || el.number === number;
        }, false);
      }

      var orientationClasses = (0, _react.useMemo)(function () {
        return [position.y > 50 ? 'edit-number-form--bottom' : 'edit-number-form--top', position.x > 50 ? 'edit-number-form--left' : 'edit-number-form--right'].join(' ');
      }, [position.x, position.y]);

      function getProductByNumber(number) {
        return number && state.area.spots.reduce(function (acc, spot) {
          if (acc) {
            return acc;
          }

          if (spot.number === number) {
            return state.area.mappedProducts.reduce(function (acc, product) {
              return acc || spot.productId === product.id && product;
            }, null);
          }

          return null;
        }, null);
      }

      function selectProduct(selectedProduct) {
        actions.updateFormValue('productId', selectedProduct.id);
        actions.updateFormValue('query', selectedProduct.name);
        actions.resetProducts();
      }

      function closeEditForm() {
        actions.unselectSpot();
      }

      return (/*#__PURE__*/_react.default.createElement("div", {
          className: "edit-number-form-wrapper",
          style: position ? {
            bottom: position.y + '%',
            left: position.x + '%'
          } : null
        }, typeof position.x === 'number' && typeof position.y === 'number' && /*#__PURE__*/_react.default.createElement("span", {
          className: "spot-number spot-number--placeholder".concat(position ? " spot-number--placeholder--visible" : '')
        }, formData.number), formData.state && /*#__PURE__*/_react.default.createElement("div", {
          className: "edit-number-form panel panel-secondary ".concat(orientationClasses)
        }, /*#__PURE__*/_react.default.createElement("button", {
          className: "btn btn-outline-borderless edit-number-form__close",
          onClick: closeEditForm,
          type: "button"
        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
          spritemap: state.app.spritemap,
          symbol: 'times'
        })), /*#__PURE__*/_react.default.createElement("div", {
          className: "panel-body"
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "form-group"
        }, /*#__PURE__*/_react.default.createElement("label", {
          htmlFor: "edit-number-form__input-number"
        }, Liferay.Language.get('number')), /*#__PURE__*/_react.default.createElement("input", {
          autoComplete: "off",
          className: "form-control",
          id: "edit-number-form__input-number",
          min: "1",
          onChange: function handleNumberChange(e) {
            e.preventDefault();
            var number = e.target.value ? parseInt(e.target.value, 10) : null;
            actions.updateFormValue('number', number);
            var numberAdded = isNumberAlreadyAdded(number);

            if (numberAdded) {
              var productToBeMapped = getProductByNumber(number);
              selectProduct(productToBeMapped);
              disableDropdown(true);
            } else {
              disableDropdown(false);
            }
          },
          placeholder: Liferay.Language.get('select-number'),
          type: "number",
          value: formData.number || ''
        })), /*#__PURE__*/_react.default.createElement("div", {
          className: "form-group"
        }, /*#__PURE__*/_react.default.createElement("label", {
          htmlFor: "edit-number-form__input-product"
        }, Liferay.Language.get('product')), /*#__PURE__*/_react.default.createElement("div", {
          className: "input-group"
        }, /*#__PURE__*/_react.default.createElement(DropdownInput, {
          disabled: dropdownDisabled,
          elements: state.area.availableProducts.map(function (el) {
            return {
              label: el.name,
              value: el.id
            };
          }),
          handleChangeFn: function handleProductInputChange(e) {
            var query = e.target.value || null;
            actions.updateFormValue('query', query);

            if (query) {
              actions.getProducts(state.app.productApiUrl, query);
            } else {
              actions.resetProducts();
            }
          },
          handleClickOnItem: function handleClickOnDropdownItem(e, value) {
            e.preventDefault();
            var productToBeMapped = state.area.availableProducts.reduce(function (acc, el) {
              return acc || el.id === value && el;
            }, null);
            selectProduct(productToBeMapped);
          },
          handleResetFn: function resetProducts() {
            actions.updateFormValue('productId', null);
            actions.updateFormValue('query', null);
            actions.resetProducts();
          },
          inputClassName: 'edit-number-form__input-number',
          inputId: 'edit-number-form__input-number',
          inputPlaceholder: inputPlaceholder,
          query: formData.query,
          resetAdditionalCssClasses: "edit-number-form__reset",
          resetIcon: props.resetIcon || /*#__PURE__*/_react.default.createElement(_Icon.default, {
            spritemap: state.app.spritemap,
            symbol: 'times-circle'
          }),
          searchAdditionalCssClasses: "edit-number-form__search",
          searchIcon: props.searchIcon || /*#__PURE__*/_react.default.createElement(_Icon.default, {
            spritemap: state.app.spritemap,
            symbol: 'search'
          }),
          selectedElement: formData.productId ? {
            label: formData.query,
            value: formData.productId
          } : null
        }))), /*#__PURE__*/_react.default.createElement("div", {
          className: "btn-group d-block"
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "row"
        }, state.area.spotFormData.state === 'edit' && /*#__PURE__*/_react.default.createElement("div", {
          className: "col-auto"
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "btn-group-item"
        }, /*#__PURE__*/_react.default.createElement("button", {
          className: "btn btn-outline-borderless btn-outline-primary edit-number-form__delete-btn",
          onClick: function handleClickOnDelete() {
            actions.deleteSpot(state.app.areaApiUrl, state.area.id, state.area.spotFormData.id);
          },
          type: "button"
        }, Liferay.Language.get('delete')))), /*#__PURE__*/_react.default.createElement("div", {
          className: "col text-right"
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "btn-group-item"
        }, /*#__PURE__*/_react.default.createElement("button", {
          className: "btn btn-secondary",
          onClick: closeEditForm,
          type: "button"
        }, Liferay.Language.get('cancel'))), /*#__PURE__*/_react.default.createElement("div", {
          className: "btn-group-item"
        }, /*#__PURE__*/_react.default.createElement("button", {
          className: "btn btn-primary",
          disabled: !(formData.productId && formData.number && formData.changed),
          onClick: function submitForm() {
            if (!formData.changed) {
              return null;
            }

            var params = [state.app.areaApiUrl, state.area.id, state.area.spotFormData];
            return formData.state === 'create' ? actions.submitNewSpot.apply(null, params) : actions.submitSpotChanges.apply(null, params);
          },
          type: "submit"
        }, Liferay.Language.get('save')))))))))
      );
    });

    var _default = EditNumberForm;
    exports.default = _default;
    //# sourceMappingURL=EditNumberForm.es.js.map
  }
});
//# sourceMappingURL=EditNumberForm.es.js.map