"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.ModalContext = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _pick = _interopRequireDefault(require("lodash/pick"));

var _Modal = _interopRequireWildcard(require("../Overlay/Modal"));

var _Bounce = _interopRequireDefault(require("../Animation/Bounce"));

var _utils = require("../utils");

var _ModalDialog = _interopRequireWildcard(require("./ModalDialog"));

var _ModalBody = _interopRequireDefault(require("./ModalBody"));

var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));

var _ModalTitle = _interopRequireDefault(require("./ModalTitle"));

var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));

var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));

var _utils2 = require("./utils");

function _templateObject2() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["backdrop"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["wrapper"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var defaultProps = {
  classPrefix: 'modal',
  size: 'sm',
  animation: _Bounce.default,
  animationTimeout: 300,
  dialogAs: _ModalDialog.default,
  backdrop: true,
  overflow: true
};

var ModalContext = /*#__PURE__*/_react.default.createContext(null);

exports.ModalContext = ModalContext;

var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var className = props.className,
      children = props.children,
      classPrefix = props.classPrefix,
      dialogClassName = props.dialogClassName,
      backdropClassName = props.backdropClassName,
      backdrop = props.backdrop,
      dialogStyle = props.dialogStyle,
      animation = props.animation,
      open = props.open,
      size = props.size,
      full = props.full,
      Dialog = props.dialogAs,
      animationProps = props.animationProps,
      animationTimeout = props.animationTimeout,
      overflow = props.overflow,
      drawer = props.drawer,
      onClose = props.onClose,
      onEntered = props.onEntered,
      onEntering = props.onEntering,
      onExited = props.onExited,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "children", "classPrefix", "dialogClassName", "backdropClassName", "backdrop", "dialogStyle", "animation", "open", "size", "full", "dialogAs", "animationProps", "animationTimeout", "overflow", "drawer", "onClose", "onEntered", "onEntering", "onExited"]);
  var inClass = {
    in: open && !animation
  };

  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
      merge = _useClassNames.merge,
      prefix = _useClassNames.prefix;

  var classes = merge(className, prefix(size, {
    full: full
  }));
  var dialogRef = (0, _react.useRef)();
  var transitionEndListener = (0, _react.useRef)(); // The style of the Modal body will be updated with the size of the window or container.

  var _useBodyStyles = (0, _utils2.useBodyStyles)(dialogRef, {
    overflow: overflow,
    drawer: drawer,
    prefix: prefix
  }),
      bodyStyles = _useBodyStyles[0],
      onChangeBodyStyles = _useBodyStyles[1],
      onDestroyEvents = _useBodyStyles[2];

  var modalContextValue = (0, _react.useMemo)(function () {
    return {
      onModalClose: onClose,
      getBodyStyles: function getBodyStyles() {
        return bodyStyles;
      }
    };
  }, [onClose, bodyStyles]);

  var _useState = (0, _react.useState)(false),
      shake = _useState[0],
      setShake = _useState[1];

  var handleBackdropClick = (0, _react.useCallback)(function () {
    // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.
    if (backdrop === 'static') {
      setShake(true);
      transitionEndListener.current = _DOMHelper.default.on(dialogRef.current, _DOMHelper.default.animation.events().end, function () {
        setShake(false);
      });
    }
  }, [backdrop]);
  var handleExited = (0, _react.useCallback)(function (node) {
    var _transitionEndListene;

    onExited === null || onExited === void 0 ? void 0 : onExited(node);
    onDestroyEvents();
    (_transitionEndListene = transitionEndListener.current) === null || _transitionEndListene === void 0 ? void 0 : _transitionEndListene.off();
  }, [onDestroyEvents, onExited]);
  var handleEntered = (0, _react.useCallback)(function (node) {
    onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);
    onChangeBodyStyles();
  }, [onChangeBodyStyles, onEntered]);
  var handleEntering = (0, _react.useCallback)(function (node) {
    onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);
    onChangeBodyStyles(true);
  }, [onChangeBodyStyles, onEntering]);
  (0, _react.useEffect)(function () {
    var _transitionEndListene2;

    (_transitionEndListene2 = transitionEndListener.current) === null || _transitionEndListene2 === void 0 ? void 0 : _transitionEndListene2.off();
  }, []);
  return /*#__PURE__*/_react.default.createElement(ModalContext.Provider, {
    value: modalContextValue
  }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
    ref: ref,
    backdrop: backdrop,
    open: open,
    onClose: onClose,
    onBackdropClick: handleBackdropClick,
    className: prefix(_templateObject()),
    onEntered: handleEntered,
    onEntering: handleEntering,
    onExited: handleExited,
    backdropClassName: merge(prefix(_templateObject2()), backdropClassName, inClass),
    containerClassName: prefix({
      open: open,
      'has-backdrop': backdrop
    }),
    transition: animation ? animation : undefined,
    animationProps: animationProps,
    dialogTransitionTimeout: animationTimeout,
    backdropTransitionTimeout: 150
  }), function (transitionProps, transitionRef) {
    var transitionClassName = transitionProps.className,
        transitionRest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, ["className"]);
    return /*#__PURE__*/_react.default.createElement(Dialog, (0, _extends2.default)({}, transitionRest, (0, _pick.default)(rest, Object.keys(_ModalDialog.modalDialogPropTypes)), {
      ref: (0, _utils.mergeRefs)(dialogRef, transitionRef),
      classPrefix: classPrefix,
      className: merge(classes, transitionClassName, prefix({
        shake: shake
      })),
      dialogClassName: dialogClassName,
      dialogStyle: dialogStyle
    }), children);
  }));
});

Modal.Body = _ModalBody.default;
Modal.Header = _ModalHeader.default;
Modal.Title = _ModalTitle.default;
Modal.Footer = _ModalFooter.default;
Modal.Dialog = _ModalDialog.default;
Modal.displayName = 'Modal';
Modal.defaultProps = defaultProps;
Modal.propTypes = (0, _extends2.default)({}, _Modal.modalPropTypes, {
  animation: _propTypes.default.any,
  animationTimeout: _propTypes.default.number,
  classPrefix: _propTypes.default.string,
  dialogClassName: _propTypes.default.string,
  size: _propTypes.default.oneOf(_utils.SIZE),
  dialogStyle: _propTypes.default.object,
  dialogAs: _propTypes.default.elementType,
  full: _propTypes.default.bool,
  overflow: _propTypes.default.bool,
  drawer: _propTypes.default.bool
});
var _default = Modal;
exports.default = _default;