"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Drawer = void 0;
var _compat = require("preact/compat");
var _Button = _interopRequireDefault(require("../Button/Button"));
var _NativeDialog = _interopRequireDefault(require("../NativeDialog/NativeDialog"));
var _classnames = _interopRequireDefault(require("classnames"));
var _i18n = require("../i18n");
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _jsxRuntime = require("preact/compat/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// TODO: closeButtonText, heading should be a string, but it is being used as a node in MCT,
// until we provide a better solution for customization, we type it as a node.

/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/drawer/).
 */
const Drawer = props => {
  const {
    ariaLabel,
    backdropClickExits,
    children,
    className,
    closeButtonText,
    closeButtonVariation,
    footerBody,
    footerTitle,
    hasFocusTrap,
    heading,
    headingId: userHeadingId,
    headingLevel,
    headingRef: userHeadingRef,
    isFooterSticky,
    isHeaderSticky,
    isOpen,
    onCloseClick,
    ...otherProps
  } = props;
  const headingRef = (0, _compat.useRef)(null);
  const headingId = (0, _useId.default)('drawer--', userHeadingId);
  const Heading = `h${headingLevel}`;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NativeDialog.default, {
    className: (0, _classnames.default)(className, 'ds-c-drawer'),
    exit: onCloseClick,
    showModal: hasFocusTrap,
    backdropClickExits: backdropClickExits,
    isOpen: isOpen,
    "aria-labelledby": headingId,
    ...otherProps,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "ds-c-drawer__window",
      tabIndex: isFooterSticky && -1,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "ds-c-drawer__header",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
          id: headingId,
          className: "ds-c-drawer__header-heading",
          ref: el => {
            headingRef.current = el;
            if (userHeadingRef) {
              userHeadingRef.current = el;
            }
          },
          children: heading
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
          "aria-label": ariaLabel ?? (0, _i18n.t)('drawer.ariaLabel'),
          className: "ds-c-drawer__close-button",
          size: "small",
          onClick: onCloseClick,
          variation: closeButtonVariation,
          children: closeButtonText ?? (0, _i18n.t)('drawer.closeButtonText')
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('ds-c-drawer__body', {
          'ds-c-drawer--is-sticky': isHeaderSticky || isFooterSticky
        }),
        tabIndex: 0,
        children: children
      }), (footerTitle || footerBody) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "ds-c-drawer__footer",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          className: "ds-c-drawer__footer-title",
          children: footerTitle
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "ds-c-drawer__footer-body",
          children: footerBody
        })]
      })]
    })
  });
};
exports.Drawer = Drawer;
Drawer.defaultProps = {
  hasFocusTrap: false,
  headingLevel: '3'
};
var _default = exports.default = Drawer;