Liferay.Loader.define("commerce-bom-admin-web@4.0.30/js/components/DetailsBox.es", ['module', 'exports', 'require', 'frontend-js-react-web$react', './StoreContext.es'], function (module, exports, require) {
  var define = undefined;
  var global = window;
  {
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.default = DetailsBox;

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

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

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

    function _extends() {
      _extends = Object.assign || function (target) {
        for (var i = 1; i < arguments.length; i++) {
          var source = arguments[i];for (var key in source) {
            if (Object.prototype.hasOwnProperty.call(source, key)) {
              target[key] = source[key];
            }
          }
        }return target;
      };return _extends.apply(this, arguments);
    }

    function DetailsListElement(props) {
      var _React$useContext = _react.default.useContext(_StoreContext.StoreContext),
          actions = _React$useContext.actions,
          state = _React$useContext.state;

      var highlightedModifierClass = state.area.highlightedDetail && state.area.highlightedDetail.number === props.number ? 'table-active' : '';
      return (/*#__PURE__*/_react.default.createElement("tr", {
          className: highlightedModifierClass,
          onMouseOut: function onMouseOut() {
            return actions.highlightDetail(null);
          },
          onMouseOver: function onMouseOver() {
            return actions.highlightDetail(props.number);
          }
        }, /*#__PURE__*/_react.default.createElement("td", {
          className: "number"
        }, props.number), /*#__PURE__*/_react.default.createElement("td", {
          className: "name"
        }, props.name), /*#__PURE__*/_react.default.createElement("td", {
          className: "sku"
        }, props.sku))
      );
    }

    function DetailsBox() {
      var _React$useContext2 = _react.default.useContext(_StoreContext.StoreContext),
          state = _React$useContext2.state;

      var spotsFilteredByNumbers = state.area.spots.reduce(function (filtered, spot, i) {
        if (i && filtered[filtered.length - 1].number === spot.number) {
          return filtered;
        }

        return filtered.concat(spot);
      }, []);
      var list = spotsFilteredByNumbers.map(function (spot) {
        var relatedProduct = state.area.mappedProducts.reduce(function (acc, prod) {
          return acc || (prod.id === spot.productId ? prod : false);
        }, false);
        return {
          name: relatedProduct.name,
          number: spot.number,
          sku: relatedProduct.sku,
          url: relatedProduct.url
        };
      });
      return (/*#__PURE__*/_react.default.createElement("div", {
          className: "h-100 panel panel-secondary"
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "panel-header panel-heading"
        }, /*#__PURE__*/_react.default.createElement("span", {
          className: "panel-title"
        }, Liferay.Language.get('mapped-products'))), /*#__PURE__*/_react.default.createElement("div", {
          className: "panel-body"
        }, list && list.length ? /*#__PURE__*/_react.default.createElement("div", {
          className: "table-responsive-sm"
        }, /*#__PURE__*/_react.default.createElement("table", {
          className: "show-quick-actions-on-hover table table-autofit table-list"
        }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, Liferay.Language.get('n')), /*#__PURE__*/_react.default.createElement("th", null, Liferay.Language.get('name')), /*#__PURE__*/_react.default.createElement("th", null, Liferay.Language.get('sku')))), /*#__PURE__*/_react.default.createElement("tbody", null, list && list.map(function (detail, i) {
          return (/*#__PURE__*/_react.default.createElement(DetailsListElement, _extends({
              key: i
            }, detail))
          );
        })))) : /*#__PURE__*/_react.default.createElement("div", {
          className: "my-5 p-5 text-center w-100"
        }, /*#__PURE__*/_react.default.createElement("h3", null, Liferay.Language.get('no-products-mapped-yet')), /*#__PURE__*/_react.default.createElement("p", null, Liferay.Language.get('click-on-the-picture-to-start-mapping-products')))))
      );
    }
    //# sourceMappingURL=DetailsBox.es.js.map
  }
});
//# sourceMappingURL=DetailsBox.es.js.map