Liferay.Loader.define("commerce-bom-admin-web@4.0.30/js/components/PictureBox.es", ['module', 'exports', 'require', 'frontend-js-react-web$react', './EditNumberForm.es', './StoreContext.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.PartDetail = PartDetail;
    exports.SpotsList = SpotsList;
    exports.CustomCursor = CustomCursor;
    exports.default = void 0;

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

    var _EditNumberForm = _interopRequireDefault(require("./EditNumberForm.es"));

    var _StoreContext = require("./StoreContext.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 ownKeys(object, enumerableOnly) {
      var keys = Object.keys(object);if (Object.getOwnPropertySymbols) {
        var symbols = Object.getOwnPropertySymbols(object);if (enumerableOnly) symbols = symbols.filter(function (sym) {
          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
        });keys.push.apply(keys, symbols);
      }return keys;
    }

    function _objectSpread(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i] != null ? arguments[i] : {};if (i % 2) {
          ownKeys(Object(source), true).forEach(function (key) {
            _defineProperty(target, key, source[key]);
          });
        } else if (Object.getOwnPropertyDescriptors) {
          Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
        } else {
          ownKeys(Object(source)).forEach(function (key) {
            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
          });
        }
      }return target;
    }

    function _defineProperty(obj, key, value) {
      if (key in obj) {
        Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
      } else {
        obj[key] = value;
      }return obj;
    }

    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 _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 PartDetail(props) {
      var numberRef = (0, _react.useRef)(null);

      var _React$useContext = _react.default.useContext(_StoreContext.StoreContext),
          actions = _React$useContext.actions;

      var containerClasses = 'spot-number' + (props.highlightedNumber ? ' spot-number--highlighted' : '');
      return (/*#__PURE__*/_react.default.createElement("button", {
          className: containerClasses,
          onClick: function onClick() {
            return actions.selectSpot(props.id);
          },
          onMouseOut: function onMouseOut() {
            return actions.highlightDetail(null);
          },
          onMouseOver: function onMouseOver() {
            return actions.highlightDetail(props.number);
          },
          ref: numberRef,
          style: {
            bottom: props.position.y + '%',
            left: props.position.x + '%'
          }
        }, props.number)
      );
    }

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

      var resumeShown = false;
      return state.area.spots.map(function (detail, i) {
        var highlightedNumber = (state.area.highlightedDetail && state.area.highlightedDetail.number) === detail.number;
        var resumeVisible = false;

        if (!resumeShown && highlightedNumber && state.area.highlightedDetail && state.area.highlightedDetail.showFirstResume) {
          resumeVisible = true;
          resumeShown = true;
        }

        return (/*#__PURE__*/_react.default.createElement(PartDetail, _extends({
            containerRef: props.containerRef,
            highlightedNumber: highlightedNumber,
            key: i,
            resumeVisible: resumeVisible
          }, detail))
        );
      });
    }

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

      return (/*#__PURE__*/_react.default.createElement("div", {
          className: "custom-cursor".concat(props.visible ? " custom-cursor--visible" : ""),
          style: {
            left: props.x ? props.x + 'px' : 0,
            top: props.y ? props.y + 'px' : 0
          }
        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
          spritemap: state.app.spritemap,
          symbol: 'plus'
        }))
      );
    }

    function PictureBox() {
      var containerRef = (0, _react.useRef)(null);

      var _React$useContext4 = _react.default.useContext(_StoreContext.StoreContext),
          actions = _React$useContext4.actions,
          state = _React$useContext4.state;

      var _useState = (0, _react.useState)({
        visible: false,
        x: 0,
        y: 0
      }),
          _useState2 = _slicedToArray(_useState, 2),
          cursor = _useState2[0],
          updateCursor = _useState2[1];

      var highlightedModifierClass = state.area && state.area.highlightedDetail && state.area.highlightedDetail.number ? ' picture-box--hovered-detail' : '';
      return (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, state.area.name && /*#__PURE__*/_react.default.createElement("div", {
          className: "panel panel-secondary picture-box-wrapper"
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "picture-box".concat(highlightedModifierClass)
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "custom-cursor-wrapper",
          onClick: function handleClick(e) {
            if (e.target.className === 'custom-cursor-wrapper') {
              var containerRect = containerRef.current.getBoundingClientRect();
              var pxLeft = e.pageX - containerRect.left;
              var pxTop = e.pageY - containerRect.top - window.scrollY;
              var x = Math.round(100 / containerRect.width * pxLeft * 1000) / 1000;
              var y = 100 - Math.round(100 / containerRect.height * pxTop * 1000) / 1000;
              actions.createSpot({
                x: x,
                y: y
              });
            }
          },
          onMouseEnter: function onMouseEnter() {
            return updateCursor(_objectSpread(_objectSpread({}, cursor), {}, {
              visible: true
            }));
          },
          onMouseLeave: function onMouseLeave() {
            return updateCursor(_objectSpread(_objectSpread({}, cursor), {}, {
              visible: false
            }));
          },
          onMouseMove: function handleMouseMove(e) {
            switch (true) {
              case e.target.className === 'custom-cursor-wrapper':
                {
                  var containerRect = containerRef.current.getBoundingClientRect();
                  var pxLeft = e.pageX - containerRect.left;
                  var pxTop = e.pageY - containerRect.top - window.scrollY;
                  updateCursor({
                    visible: true,
                    x: pxLeft,
                    y: pxTop
                  });
                  break;
                }

              default:
                {
                  updateCursor(_objectSpread(_objectSpread({}, cursor), {}, {
                    visible: false
                  }));
                  break;
                }
            }
          },
          ref: containerRef
        }, /*#__PURE__*/_react.default.createElement(CustomCursor, {
          icon: "plus",
          visible: cursor.visible,
          x: cursor.x,
          y: cursor.y
        }), /*#__PURE__*/_react.default.createElement(SpotsList, {
          containerRef: containerRef
        })), /*#__PURE__*/_react.default.createElement(_EditNumberForm.default, null), /*#__PURE__*/_react.default.createElement("img", {
          alt: state.area.name,
          className: "picture-box__image",
          src: state.area.imageUrl
        }))))
      );
    }

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