"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// 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 headingRef = (0, _compat.useRef)(null);
  const headingId = (0, _useId.default)('drawer--', props.headingId);
  const Heading = `h${props.headingLevel}`;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NativeDialog.default, {
    className: (0, _classnames.default)(props.className, 'ds-c-drawer'),
    exit: props.onCloseClick,
    showModal: props.hasFocusTrap,
    backdropClickExits: props.backdropClickExits,
    isOpen: props.isOpen,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "ds-c-drawer__window",
      tabIndex: -1,
      "aria-labelledby": headingId,
      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 (props.headingRef) {
              props.headingRef.current = el;
            }
          },
          children: props.heading
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
          "aria-label": props.ariaLabel ?? (0, _i18n.t)('drawer.ariaLabel'),
          className: "ds-c-drawer__close-button",
          size: "small",
          onClick: props.onCloseClick,
          variation: props.closeButtonVariation,
          children: props.closeButtonText ?? (0, _i18n.t)('drawer.closeButtonText')
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('ds-c-drawer__body', {
          'ds-c-drawer--is-sticky': props.isHeaderSticky || props.isFooterSticky
        }),
        tabIndex: 0,
        children: props.children
      }), (props.footerTitle || props.footerBody) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "ds-c-drawer__footer",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          className: "ds-c-drawer__footer-title",
          children: props.footerTitle
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "ds-c-drawer__footer-body",
          children: props.footerBody
        })]
      })]
    })
  });
};
exports.Drawer = Drawer;
Drawer.defaultProps = {
  hasFocusTrap: false,
  headingLevel: '3'
};
var _default = Drawer;
exports.default = _default;