"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
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 _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _react = _interopRequireDefault(require("react"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Text = _interopRequireDefault(require("../Text"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _constants = require("./constants");
var _ModalPreviewLayoutSt = require("./ModalPreviewLayout.st.css.js");
var _NavigationButton = _interopRequireDefault(require("./NavigationButton/NavigationButton"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ModalPreviewLayout/ModalPreviewLayout.jsx";
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; })(); }
/** This is a fullscreen modal to present a document to the user overlaying the entire view port */
var ModalPreviewLayout = /*#__PURE__*/function (_React$PureComponent) {
  function ModalPreviewLayout(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, ModalPreviewLayout);
    _this = _callSuper(this, ModalPreviewLayout, [props]);
    _this._onRightNavigationClick = function () {
      var childIndexDisplayed = _this.state.childIndexDisplayed;
      var onClick = _this.props.nextButtonProps.onClick;
      var newChildIndexDisplayed = childIndexDisplayed + 1;
      _this.setState({
        childIndexDisplayed: newChildIndexDisplayed
      }, function () {
        onClick && onClick(newChildIndexDisplayed);
      });
    };
    _this._onLeftNavigationClick = function () {
      var childIndexDisplayed = _this.state.childIndexDisplayed;
      var onClick = _this.props.prevButtonProps.onClick;
      var newChildIndexDisplayed = childIndexDisplayed - 1;
      _this.setState({
        childIndexDisplayed: newChildIndexDisplayed
      }, function () {
        onClick && onClick(newChildIndexDisplayed);
      });
    };
    _this.state = {
      childIndexDisplayed: _this.props.startDisplayingAtChildIndex
    };
    return _this;
  }
  (0, _inherits2["default"])(ModalPreviewLayout, _React$PureComponent);
  return (0, _createClass2["default"])(ModalPreviewLayout, [{
    key: "_shouldClose",
    value: function _shouldClose(id) {
      return this.props.shouldCloseOnOverlayClick && [_constants.modalPreviewIDs.overlay, _constants.modalPreviewIDs.innerOverlay].includes(id);
    }
  }, {
    key: "_onOverlayClick",
    value: function _onOverlayClick(onClose) {
      var _this2 = this;
      return function (_ref) {
        var id = _ref.target.id;
        if (_this2._shouldClose(id) && typeof onClose === 'function') {
          onClose();
        }
      };
    }
  }, {
    key: "_renderNavigationButtons",
    value: function _renderNavigationButtons(hasLeft, hasRight) {
      var _this$props = this.props,
        prevButtonProps = _this$props.prevButtonProps,
        nextButtonProps = _this$props.nextButtonProps;
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 72,
          columnNumber: 7
        }
      }, hasLeft && /*#__PURE__*/_react["default"].createElement(_NavigationButton["default"], {
        tooltipText: prevButtonProps.tooltipText,
        direction: _constants.arrowsDirection.leftArrow,
        onClick: this._onLeftNavigationClick,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 74,
          columnNumber: 11
        }
      }), hasRight && /*#__PURE__*/_react["default"].createElement(_NavigationButton["default"], {
        tooltipText: nextButtonProps.tooltipText,
        direction: _constants.arrowsDirection.rightArrow,
        onClick: this._onRightNavigationClick,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 81,
          columnNumber: 11
        }
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        dataHook = _this$props2.dataHook,
        actions = _this$props2.actions,
        title = _this$props2.title,
        children = _this$props2.children,
        onClose = _this$props2.onClose,
        closeButtonTooltipText = _this$props2.closeButtonTooltipText,
        closeButtonAriaLabel = _this$props2.closeButtonAriaLabel,
        skin = _this$props2.skin;
      var childIndexDisplayed = this.state.childIndexDisplayed;
      var childrenArr = _react["default"].Children.toArray(children);
      var hasLeft = childIndexDisplayed > 0;
      var hasRight = childIndexDisplayed < childrenArr.length - 1;
      return /*#__PURE__*/_react["default"].createElement("div", {
        id: _constants.modalPreviewIDs.overlay,
        "data-hook": dataHook,
        className: _ModalPreviewLayoutSt.classes.root,
        onClick: this._onOverlayClick(onClose),
        "data-skin": skin,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 109,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _ModalPreviewLayoutSt.st)(_ModalPreviewLayoutSt.classes.header, {
          skin: skin
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 116,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _constants.dataHooks.modalPreviewTitle,
        className: _ModalPreviewLayoutSt.classes.title,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 117,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
        light: skin === _constants.skins.dark,
        ellipsis: true,
        tooltipProps: {
          placement: 'bottom'
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 121,
          columnNumber: 13
        }
      }, title)), /*#__PURE__*/_react["default"].createElement("div", {
        className: _ModalPreviewLayoutSt.classes.actions,
        "data-hook": _constants.dataHooks.modalPreviewActions,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 129,
          columnNumber: 11
        }
      }, actions), /*#__PURE__*/_react["default"].createElement("div", {
        className: _ModalPreviewLayoutSt.classes.closeButton,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 135,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
        disabled: !closeButtonTooltipText,
        className: _ModalPreviewLayoutSt.classes.modalTooltip,
        dataHook: _constants.dataHooks.closeButtonTooltip,
        appendTo: "scrollParent",
        content: /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 141,
            columnNumber: 24
          }
        }, closeButtonTooltipText),
        placement: "bottom",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 136,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
        as: "button",
        onClick: onClose,
        priority: "secondary",
        ariaLabel: closeButtonAriaLabel,
        skin: skin === _constants.skins.dark ? 'transparent' : 'standard',
        dataHook: _constants.dataHooks.modalPreviewCloseButton,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 144,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.X, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 152,
          columnNumber: 17
        }
      }))))), /*#__PURE__*/_react["default"].createElement("div", {
        id: _constants.modalPreviewIDs.innerOverlay,
        "data-hook": _constants.dataHooks.innerOverlay,
        className: _ModalPreviewLayoutSt.classes.innerOverlay,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 157,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _constants.dataHooks.modalPreviewContent,
        className: _ModalPreviewLayoutSt.classes.content,
        "data-index": childIndexDisplayed,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 162,
          columnNumber: 11
        }
      }, childrenArr[childIndexDisplayed]), this._renderNavigationButtons(hasLeft, hasRight)));
    }
  }]);
}(_react["default"].PureComponent);
ModalPreviewLayout.displayName = 'ModalPreviewLayout';
ModalPreviewLayout.defaultProps = {
  shouldCloseOnOverlayClick: true,
  nextButtonProps: {},
  prevButtonProps: {},
  startDisplayingAtChildIndex: 0,
  skin: 'dark'
};
var _default = exports["default"] = ModalPreviewLayout;