"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Dialog = void 0;
var _react = require("react");
var _CloseButton = _interopRequireDefault(require("../CloseButton/CloseButton"));
var _NativeDialog = _interopRequireDefault(require("../NativeDialog/NativeDialog"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useDialogAnalytics = _interopRequireDefault(require("./useDialogAnalytics"));
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _i18n = require("../i18n");
var _useBodyScrollPrevention = require("./useBodyScrollPrevention");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/modal-dialog/).
 */
const Dialog = props => {
  const {
    actions,
    actionsClassName,
    alert,
    analytics,
    analyticsLabelOverride,
    analyticsEventTypeOverride,
    onAnalyticsEvent,
    ariaCloseLabel,
    children,
    className,
    headerClassName,
    heading,
    id,
    onEnter,
    onExit,
    size,
    ...modalProps
  } = props;
  const rootId = (0, _useId.default)('dialog--', id);
  const headingRef = (0, _useDialogAnalytics.default)(props);
  const headingId = `${rootId}__heading`;
  const contentId = `${rootId}__content`;
  const dialogClassNames = (0, _classnames.default)('ds-c-dialog', className, size && `ds-c-dialog--${size}`);
  const headerClassNames = (0, _classnames.default)('ds-c-dialog__header', headerClassName);
  const actionsClassNames = (0, _classnames.default)('ds-c-dialog__actions', actionsClassName);
  const containerRef = (0, _react.useRef)();
  (0, _react.useEffect)(() => {
    if (onEnter) onEnter();
  }, []);

  // Set initial focus
  (0, _react.useEffect)(() => {
    containerRef.current?.focus();
  }, [containerRef]);
  (0, _useBodyScrollPrevention.useBodyScrollPrevention)(modalProps.isOpen ?? true);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NativeDialog.default, {
    className: dialogClassNames,
    showModal: true,
    exit: onExit,
    ...modalProps,
    id: rootId,
    boundingBoxRef: containerRef,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "ds-c-dialog__window",
      role: "document",
      ref: containerRef,
      tabIndex: -1,
      "aria-labelledby": headingId,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
        className: headerClassNames,
        children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
          className: "ds-c-dialog__heading",
          id: headingId,
          ref: headingRef,
          children: heading
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloseButton.default, {
          "aria-label": ariaCloseLabel ?? (0, _i18n.t)('dialog.ariaCloseLabel'),
          className: "ds-c-dialog__close",
          id: `${rootId}__close`,
          onClick: onExit
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("main", {
        role: "main",
        className: "ds-c-dialog__body",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          id: contentId,
          children: children
        }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: actionsClassNames,
          children: actions
        })]
      })]
    })
  });
};
exports.Dialog = Dialog;
var _default = Dialog;
exports.default = _default;