import _extends from "@babel/runtime/helpers/esm/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["backdrop"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["wrapper"]);

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

  return data;
}

import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import pick from 'lodash/pick';
import BaseModal, { modalPropTypes } from '../Overlay/Modal';
import Bounce from '../Animation/Bounce';
import { useClassNames, mergeRefs, SIZE } from '../utils';
import ModalDialog, { modalDialogPropTypes } from './ModalDialog';
import ModalBody from './ModalBody';
import ModalHeader from './ModalHeader';
import ModalTitle from './ModalTitle';
import ModalFooter from './ModalFooter';
import helper from '../DOMHelper';
import { useBodyStyles } from './utils';
var defaultProps = {
  classPrefix: 'modal',
  size: 'sm',
  animation: Bounce,
  animationTimeout: 300,
  dialogAs: ModalDialog,
  backdrop: true,
  overflow: true
};
export var ModalContext = /*#__PURE__*/React.createContext(null);
var Modal = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(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 = useClassNames(classPrefix),
      merge = _useClassNames.merge,
      prefix = _useClassNames.prefix;

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

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

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

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

  var handleBackdropClick = 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 = helper.on(dialogRef.current, helper.animation.events().end, function () {
        setShake(false);
      });
    }
  }, [backdrop]);
  var handleExited = 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 = useCallback(function (node) {
    onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);
    onChangeBodyStyles();
  }, [onChangeBodyStyles, onEntered]);
  var handleEntering = useCallback(function (node) {
    onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);
    onChangeBodyStyles(true);
  }, [onChangeBodyStyles, onEntering]);
  useEffect(function () {
    var _transitionEndListene2;

    (_transitionEndListene2 = transitionEndListener.current) === null || _transitionEndListene2 === void 0 ? void 0 : _transitionEndListene2.off();
  }, []);
  return /*#__PURE__*/React.createElement(ModalContext.Provider, {
    value: modalContextValue
  }, /*#__PURE__*/React.createElement(BaseModal, _extends({}, 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 = _objectWithoutPropertiesLoose(transitionProps, ["className"]);

    return /*#__PURE__*/React.createElement(Dialog, _extends({}, transitionRest, pick(rest, Object.keys(modalDialogPropTypes)), {
      ref: mergeRefs(dialogRef, transitionRef),
      classPrefix: classPrefix,
      className: merge(classes, transitionClassName, prefix({
        shake: shake
      })),
      dialogClassName: dialogClassName,
      dialogStyle: dialogStyle
    }), children);
  }));
});
Modal.Body = ModalBody;
Modal.Header = ModalHeader;
Modal.Title = ModalTitle;
Modal.Footer = ModalFooter;
Modal.Dialog = ModalDialog;
Modal.displayName = 'Modal';
Modal.defaultProps = defaultProps;
Modal.propTypes = _extends({}, modalPropTypes, {
  animation: PropTypes.any,
  animationTimeout: PropTypes.number,
  classPrefix: PropTypes.string,
  dialogClassName: PropTypes.string,
  size: PropTypes.oneOf(SIZE),
  dialogStyle: PropTypes.object,
  dialogAs: PropTypes.elementType,
  full: PropTypes.bool,
  overflow: PropTypes.bool,
  drawer: PropTypes.bool
});
export default Modal;