"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 = _interopRequireWildcard(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));
var _Loader = _interopRequireDefault(require("../Loader"));
var _ImageViewerSt = require("./ImageViewer.st.css.js");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _AddItem = _interopRequireDefault(require("../AddItem/AddItem"));
var _Box = _interopRequireDefault(require("../Box"));
var _PopoverMenu = _interopRequireDefault(require("../PopoverMenu"));
var _Image = _interopRequireDefault(require("../Image"));
var _constants = require("./constants");
var _StatusContext = require("../FormField/StatusContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ImageViewer/ImageViewer.jsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 ImageViewer = /*#__PURE__*/function (_Component) {
  function ImageViewer(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, ImageViewer);
    _this = _callSuper(this, ImageViewer, [props]);
    _this._renderAddImage = function () {
      var _this$props = _this.props,
        onAddImage = _this$props.onAddImage,
        addImageInfo = _this$props.addImageInfo,
        _this$props$tooltipPr = _this$props.tooltipProps,
        tooltipProps = _this$props$tooltipPr === void 0 ? {} : _this$props$tooltipPr,
        disabled = _this$props.disabled;
      return /*#__PURE__*/_react["default"].createElement(_AddItem["default"], {
        ref: _this.focusNode,
        onClick: onAddImage,
        theme: "image",
        dataHook: _constants.dataHooks.addItem,
        disabled: disabled,
        tooltipProps: _objectSpread(_objectSpread({}, tooltipProps), {}, {
          content: addImageInfo
        }),
        ariaLabel: addImageInfo,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 54,
          columnNumber: 7
        }
      });
    };
    /** `display: none` is used to prefetch an image == it fetches the image but doesn't show it */
    _this._renderImageElement = function (_ref) {
      var imageUrl = _ref.imageUrl,
        shouldDisplay = _ref.shouldDisplay,
        onLoad = _ref.onLoad,
        onError = _ref.onError,
        key = _ref.key,
        dataHook = _ref.dataHook,
        fit = _ref.fit;
      var _this$props2 = _this.props,
        _this$props2$imagePro = _this$props2.imageProps,
        imageProps = _this$props2$imagePro === void 0 ? {} : _this$props2$imagePro,
        removeRoundedBorders = _this$props2.removeRoundedBorders;
      return /*#__PURE__*/_react["default"].createElement(_Image["default"], (0, _extends2["default"])({
        borderRadius: removeRoundedBorders && 0,
        transparent: true
      }, imageProps, {
        className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.image, {
          shouldDisplay: shouldDisplay,
          fit: fit
        }),
        src: imageUrl,
        onLoad: onLoad,
        onError: onError,
        key: key,
        dataHook: dataHook,
        "data-image-visible": shouldDisplay,
        fit: fit,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 79,
          columnNumber: 7
        }
      }));
    };
    _this._resetImageLoading = function () {
      _this.setState({
        imageLoading: false
      });
    };
    _this._onImageLoad = function (e) {
      var onImageLoad = _this.props.onImageLoad;
      _this.setState({
        imageLoading: false
      }, function () {
        return onImageLoad(e);
      });
    };
    _this._getCurrentAndPreviousImages = function () {
      var currentImageUrl = _this.props.imageUrl;
      var previousImageUrl = _this.state.previousImageUrl;
      return {
        currentImageUrl: currentImageUrl,
        previousImageUrl: previousImageUrl
      };
    };
    _this._renderImage = function () {
      var fit = _this.props.fit;
      var imageLoading = _this.state.imageLoading;
      if (!_this.props.imageUrl) {
        return;
      }
      var _this$_getCurrentAndP = _this._getCurrentAndPreviousImages(),
        currentImageUrl = _this$_getCurrentAndP.currentImageUrl,
        previousImageUrl = _this$_getCurrentAndP.previousImageUrl;
      var shouldDisplayContainer = !!(currentImageUrl || previousImageUrl);
      var generateKey = function generateKey(imageName, imageUrl) {
        return "".concat(imageName, "-").concat(imageUrl);
      };
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.imageContainer, {
          /** hide container when no image provided, so AddItem behind it can be clickable */
          shouldDisplay: shouldDisplayContainer
        }),
        "data-container-visible": shouldDisplayContainer,
        "data-hook": _constants.dataHooks.imagesContainer,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 138,
          columnNumber: 7
        }
      }, _this._renderImageElement({
        imageUrl: currentImageUrl,
        shouldDisplay: !!currentImageUrl && !imageLoading,
        onLoad: _this._onImageLoad,
        onError: function onError() {
          _this._resetImageLoading();
        },
        dataHook: _constants.dataHooks.image,
        key: generateKey(_constants.dataHooks.image, currentImageUrl),
        fit: fit
      }), _this._renderImageElement({
        imageUrl: previousImageUrl,
        shouldDisplay: imageLoading && !!previousImageUrl,
        dataHook: _constants.dataHooks.previousImage,
        key: generateKey(_constants.dataHooks.previousImage, previousImageUrl),
        fit: fit
      }));
    };
    _this._renderUpdateButton = function (ref) {
      var _this$props3 = _this.props,
        updateImageInfo = _this$props3.updateImageInfo,
        onUpdateImage = _this$props3.onUpdateImage,
        tooltipProps = _this$props3.tooltipProps,
        updateButtonAriaLabel = _this$props3.updateButtonAriaLabel;
      return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
        timeout: 0,
        dataHook: _constants.dataHooks.updateTooltip,
        content: updateImageInfo,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 180,
          columnNumber: 7
        }
      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
        ref: ref,
        dataHook: _constants.dataHooks.update,
        onClick: onUpdateImage,
        skin: "light",
        priority: "secondary",
        ariaLabel: updateButtonAriaLabel,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 186,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Replace, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 194,
          columnNumber: 11
        }
      })));
    };
    _this._resetPreviousImage = function () {
      return _this.setState({
        previousImageUrl: undefined
      });
    };
    _this._renderRemoveButton = function (ref) {
      var _this$props4 = _this.props,
        removeImageInfo = _this$props4.removeImageInfo,
        onRemoveImage = _this$props4.onRemoveImage,
        tooltipProps = _this$props4.tooltipProps,
        removeButtonAriaLabel = _this$props4.removeButtonAriaLabel;
      return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
        timeout: 0,
        dataHook: _constants.dataHooks.removeTooltip,
        content: removeImageInfo,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 210,
          columnNumber: 7
        }
      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
        ref: ref,
        dataHook: _constants.dataHooks.remove,
        skin: "light",
        priority: "secondary",
        onClick: function onClick(e) {
          _this._resetPreviousImage();
          onRemoveImage && onRemoveImage(e);
        },
        ariaLabel: removeButtonAriaLabel,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 216,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Delete, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 227,
          columnNumber: 11
        }
      })));
    };
    _this._renderDownloadButton = function (ref) {
      var _this$props5 = _this.props,
        downloadImageInfo = _this$props5.downloadImageInfo,
        onDownloadImage = _this$props5.onDownloadImage,
        tooltipProps = _this$props5.tooltipProps;
      return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
        timeout: 0,
        dataHook: _constants.dataHooks.downloadTooltip,
        content: downloadImageInfo,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 236,
          columnNumber: 7
        }
      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
        ref: ref,
        dataHook: _constants.dataHooks.download,
        skin: "light",
        priority: "secondary",
        onClick: function onClick(e) {
          onDownloadImage && onDownloadImage(e);
        },
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 242,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Download, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 251,
          columnNumber: 11
        }
      })));
    };
    _this._hidePopover = function () {
      return _this.setState({
        popoverOpen: false
      });
    };
    _this._showPopover = function () {
      return _this.setState({
        popoverOpen: true
      });
    };
    _this._renderMoreButton = function () {
      var _this$props6 = _this.props,
        tooltipProps = _this$props6.tooltipProps,
        moreImageInfo = _this$props6.moreImageInfo,
        downloadImageInfo = _this$props6.downloadImageInfo,
        onDownloadImage = _this$props6.onDownloadImage,
        removeImageInfo = _this$props6.removeImageInfo,
        onRemoveImage = _this$props6.onRemoveImage;
      return /*#__PURE__*/_react["default"].createElement(_PopoverMenu["default"], {
        dataHook: _constants.dataHooks.actionsMenu,
        onHide: _this._hidePopover,
        onShow: _this._showPopover,
        triggerElement: function triggerElement(_ref2) {
          var toggle = _ref2.toggle;
          return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
            timeout: 0,
            dataHook: _constants.dataHooks.moreTooltip,
            content: moreImageInfo,
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 276,
              columnNumber: 11
            }
          }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
            onClick: toggle,
            dataHook: _constants.dataHooks.more,
            skin: "light",
            priority: _this.state.popoverOpen ? 'primary' : 'secondary',
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 282,
              columnNumber: 13
            }
          }, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.More, {
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 288,
              columnNumber: 15
            }
          })));
        },
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 271,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_PopoverMenu["default"].MenuItem, {
        prefixIcon: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Download, {
          __self: _this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 294,
            columnNumber: 23
          }
        }),
        text: downloadImageInfo,
        onClick: onDownloadImage,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 293,
          columnNumber: 9
        }
      }), /*#__PURE__*/_react["default"].createElement(_PopoverMenu["default"].MenuItem, {
        prefixIcon: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Delete, {
          __self: _this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 299,
            columnNumber: 23
          }
        }),
        text: removeImageInfo,
        onClick: onRemoveImage,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 298,
          columnNumber: 9
        }
      }));
    };
    _this._renderFirstButton = function () {
      var _this$props7 = _this.props,
        showUpdateButton = _this$props7.showUpdateButton,
        showRemoveButton = _this$props7.showRemoveButton,
        showDownloadButton = _this$props7.showDownloadButton;
      if (showUpdateButton) return _this._renderUpdateButton(_this.focusNode);
      if (showDownloadButton) return _this._renderDownloadButton(_this.focusNode);
      if (showRemoveButton) return _this._renderRemoveButton(_this.focusNode);
      return null;
    };
    _this._renderSecondButton = function () {
      var _this$props8 = _this.props,
        showUpdateButton = _this$props8.showUpdateButton,
        showRemoveButton = _this$props8.showRemoveButton,
        showDownloadButton = _this$props8.showDownloadButton;

      // All three options - show more button
      if (showUpdateButton && showDownloadButton && showRemoveButton) {
        return _this._renderMoreButton();
      }

      // Two options - show second button
      if (showUpdateButton && showRemoveButton) return _this._renderRemoveButton();
      if (showUpdateButton && showDownloadButton) return _this._renderDownloadButton();
      if (showDownloadButton && showRemoveButton) return _this._renderRemoveButton();
      return null;
    };
    _this._renderLoader = function () {
      return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
        align: "center",
        verticalAlign: "middle",
        height: "100%",
        dataHook: _constants.dataHooks.loader,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 338,
          columnNumber: 5
        }
      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
        size: "small",
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 344,
          columnNumber: 7
        }
      }));
    };
    _this._renderButtons = function () {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: _ImageViewerSt.classes.buttons,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 350,
          columnNumber: 7
        }
      }, _this._renderFirstButton(), _this._renderSecondButton());
    };
    _this._renderOverlayWith = function (content) {
      var removeRoundedBorders = _this.props.removeRoundedBorders;
      var _this$_getCurrentAndP2 = _this._getCurrentAndPreviousImages(),
        currentImageUrl = _this$_getCurrentAndP2.currentImageUrl,
        previousImageUrl = _this$_getCurrentAndP2.previousImageUrl;
      var shouldDisplayOverlay = !!(currentImageUrl || previousImageUrl);
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.overlay, {
          removeRadius: removeRoundedBorders,
          shouldDisplay: shouldDisplayOverlay
        }),
        "data-remove-radius": removeRoundedBorders,
        "data-hook": _constants.dataHooks.overlay,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 366,
          columnNumber: 7
        }
      }, content, /*#__PURE__*/_react["default"].createElement("span", {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 375,
          columnNumber: 9
        }
      }));
    };
    /**
     * Sets focus on the element
     */
    _this.focus = function () {
      _this.focusNode.current && _this.focusNode.current.focus();
    };
    var _imageUrl = props.imageUrl;
    _this.focusNode = /*#__PURE__*/_react["default"].createRef();
    _this.state = {
      imageLoading: !!_imageUrl,
      previousImageUrl: undefined,
      popoverOpen: false
    };
    return _this;
  }
  (0, _inherits2["default"])(ImageViewer, _Component);
  return (0, _createClass2["default"])(ImageViewer, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      var currentImageUrl = this.props.imageUrl;
      var nextImageUrl = nextProps.imageUrl;
      if (nextImageUrl && currentImageUrl !== nextImageUrl) {
        this.setState({
          imageLoading: true,
          previousImageUrl: currentImageUrl
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props9 = this.props,
        width = _this$props9.width,
        height = _this$props9.height,
        disabled = _this$props9.disabled,
        dataHook = _this$props9.dataHook,
        removeRoundedBorders = _this$props9.removeRoundedBorders,
        imageUrl = _this$props9.imageUrl,
        fit = _this$props9.fit,
        status = _this$props9.status,
        statusMessage = _this$props9.statusMessage,
        className = _this$props9.className;
      var _this$state = this.state,
        imageLoading = _this$state.imageLoading,
        previousImageUrl = _this$state.previousImageUrl,
        popoverOpen = _this$state.popoverOpen;
      var finalStatus = (0, _StatusContext.getStatusFromContext)(this.context, status);
      var hasImage = !!imageUrl;
      var imageLoaded = hasImage && !imageLoading;
      var cssStates = {
        disabled: disabled,
        status: !disabled && finalStatus,
        removeRadius: removeRoundedBorders,
        hasImage: hasImage,
        popoverOpen: popoverOpen,
        imageLoading: imageLoading
      };
      var rootDataAttributes = {
        'data-disabled': disabled,
        'data-image-loaded': imageLoaded,
        'data-hook': dataHook
      };
      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
        className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.root, cssStates, className),
        style: {
          width: width,
          height: height
        }
      }, rootDataAttributes, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 422,
          columnNumber: 7
        }
      }), !hasImage && this._renderAddImage(), this._renderImage(), !disabled && this._renderOverlayWith(imageLoading ? this._renderLoader() : hasImage && this._renderButtons()), (status || finalStatus === 'loading') && !disabled && /*#__PURE__*/_react["default"].createElement("div", {
        className: _ImageViewerSt.classes.statusContainer,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 440,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
        status: finalStatus,
        message: statusMessage,
        dataHook: _constants.dataHooks.errorTooltip,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 441,
          columnNumber: 13
        }
      })));
    }
  }]);
}(_react.Component);
ImageViewer.contextType = _StatusContext.StatusContext;
ImageViewer.displayName = 'ImageViewer';
ImageViewer.defaultProps = {
  showUpdateButton: true,
  showDownloadButton: false,
  showRemoveButton: true,
  fit: 'cover',
  addImageInfo: 'Add Image',
  updateImageInfo: 'Update',
  downloadImageInfo: 'Download',
  removeImageInfo: 'Remove',
  moreImageInfo: 'More actions',
  onImageLoad: function onImageLoad() {
    return {};
  }
};
var _default = exports["default"] = ImageViewer;