"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Modal = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactModal = _interopRequireDefault(require("react-modal"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _button = require("../button");
var _useElementsSize = require("../hooks/use-elements-size");
var _modalService = _interopRequireDefault(require("./modal-service"));
var _useTranslation = require("../hooks/use-translation");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
/** A modal dialog with configurable layout
 * @midnight-gray-supported.
 * @alpine-light-supported.
 * */
const Modal = ({
  show,
  contentClassName,
  modalBodyClassName,
  header,
  title,
  children,
  footer,
  hideFooter,
  hideHeader,
  disableConfirmButton,
  testId,
  disableDismissButton,
  formId,
  aria,
  onConfirmModal = () => {},
  onDismissModal = () => {},
  confirmButtonText: confirmButtonTextParam,
  dismissButtonText,
  labelText,
  modalKey = 'modal-key',
  isLoading = false,
  shouldCloseOnEsc = true,
  shouldCloseOnOverlayClick = true,
  showConfirmButton = true,
  showDismissButton = false,
  confirmButtonTooltip,
  confirmButtonAccentType = _button.ACCENT_TYPES.PRIMARY,
  showCloseIcon = true,
  forceOpen = false,
  // TODO = UIUX-7357 Set to false once the cases that need this set it explicitly
  supportsStacking = false,
  overlayClassName = '',
  closeButtonTestId = 'close-button',
  contentRef
}) => {
  const {
    t
  } = (0, _useTranslation.useTranslation)();
  const confirmButtonText = confirmButtonTextParam ?? t('OK');
  const modalBodyRef = (0, _react.useRef)(null);
  const modalService = _modalService.default.getInstance();
  const [hasScrollbar, setHasScrollbar] = (0, _react.useState)(false);
  const [, height] = (0, _useElementsSize.useElementsSize)(modalBodyRef, true);
  const handleDismiss = e => {
    e?.stopPropagation();
    onDismissModal(e);
  };
  const handleConfirm = e => {
    e?.stopPropagation();
    onConfirmModal(e);
  };
  const onRequestClose = e => {
    const onRequestCloseHandler = showDismissButton ? handleDismiss : handleConfirm;
    onRequestCloseHandler(e);
  };
  const handleRegisterModal = () => {
    modalService?.closeAllDropdowns();
    modalService?.registerModal({
      key: modalKey,
      triggerClose: onRequestClose,
      forceOpen,
      supportsStacking
    });
    setHasScrollbar(!!modalBodyRef.current && modalBodyRef.current.clientHeight !== modalBodyRef.current.scrollHeight);
  };
  const handleClearModal = () => {
    modalService?.clearModal(modalKey);
  };
  const confirmButtonHandlerProps = formId ? {
    formId,
    type: _button.BUTTON_TYPES.SUBMIT
  } : {
    onClick: handleConfirm,
    type: _button.BUTTON_TYPES.BUTTON
  };
  (0, _react.useEffect)(() => {
    if (modalBodyRef.current && height) {
      setHasScrollbar(modalBodyRef.current.scrollHeight > height);
    } else {
      setHasScrollbar(false);
    }
  }, [height]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactModal.default, {
    isOpen: show,
    testId: testId,
    className: (0, _classnames.default)('r-modal-content', contentClassName),
    onRequestClose: onRequestClose,
    shouldCloseOnEsc: shouldCloseOnEsc,
    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
    overlayClassName: {
      base: `r-modal-overlay ${overlayClassName}`,
      afterOpen: 'r-modal-overlay-open',
      beforeClose: 'r-modal-overlay-close'
    },
    bodyOpenClassName: "modal-open",
    ariaHideApp: false // TODO: I don't know how to do `ReactModal.setAppElement` right. leaving this here for now
    ,
    onAfterOpen: handleRegisterModal,
    onAfterClose: handleClearModal,
    contentRef: contentRef,
    aria: aria ?? {
      label: t('Modal')
    },
    children: [!hideHeader && (header ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "dr-modal-header",
      children: header
    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "dr-modal-header",
      "test-id": "dr-modal-header",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
        className: "title",
        "test-id": "dr-modal-header-title",
        children: title
      }), showCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        "test-id": closeButtonTestId,
        onClick: onRequestClose,
        className: "close button command round-icon-button",
        "aria-label": labelText ?? t('Close'),
        type: _button.BUTTON_TYPES.BUTTON,
        disabled: showDismissButton ? disableDismissButton : disableConfirmButton,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
          icon: _faXmark.faXmark
        })
      })]
    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ref: modalBodyRef,
      className: (0, _classnames.default)('dr-modal-body', modalBodyClassName, {
        'scroll-bar-present': show && hasScrollbar
      }),
      children: children
    }), !hideFooter && (footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "dr-modal-footer",
      children: footer
    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "dr-modal-footer",
      children: [showConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
        ...confirmButtonHandlerProps,
        className: "dr-modal-confirm-button",
        accentType: confirmButtonAccentType,
        testId: "modal-close",
        isDisabled: disableConfirmButton,
        isLoading: isLoading,
        loadingText: confirmButtonText,
        tooltipText: confirmButtonTooltip,
        children: confirmButtonText
      }), showDismissButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
        accentType: _button.ACCENT_TYPES.SECONDARY,
        onClick: handleDismiss,
        testId: "modal-dismiss",
        isDisabled: disableDismissButton || isLoading,
        type: _button.BUTTON_TYPES.BUTTON,
        children: dismissButtonText ?? t('Close')
      })]
    }))]
  });
};
exports.Modal = Modal;