import { useRef } from 'react';
import Button from '../Button/Button';
import NativeDialog from '../NativeDialog/NativeDialog';
import classNames from 'classnames';
import { t } from '../i18n';
import useId from '../utilities/useId';

// 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.
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/drawer/).
 */
export const Drawer = props => {
  const headingRef = useRef(null);
  const headingId = useId('drawer--', props.headingId);
  const Heading = `h${props.headingLevel}`;
  return /*#__PURE__*/_jsx(NativeDialog, {
    className: classNames(props.className, 'ds-c-drawer'),
    exit: props.onCloseClick,
    showModal: props.hasFocusTrap,
    backdropClickExits: props.backdropClickExits,
    isOpen: props.isOpen,
    children: /*#__PURE__*/_jsxs("div", {
      className: "ds-c-drawer__window",
      tabIndex: -1,
      "aria-labelledby": headingId,
      children: [/*#__PURE__*/_jsxs("div", {
        className: "ds-c-drawer__header",
        children: [/*#__PURE__*/_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__*/_jsx(Button, {
          "aria-label": props.ariaLabel ?? t('drawer.ariaLabel'),
          className: "ds-c-drawer__close-button",
          size: "small",
          onClick: props.onCloseClick,
          variation: props.closeButtonVariation,
          children: props.closeButtonText ?? t('drawer.closeButtonText')
        })]
      }), /*#__PURE__*/_jsx("div", {
        className: classNames('ds-c-drawer__body', {
          'ds-c-drawer--is-sticky': props.isHeaderSticky || props.isFooterSticky
        }),
        tabIndex: 0,
        children: props.children
      }), (props.footerTitle || props.footerBody) && /*#__PURE__*/_jsxs("div", {
        className: "ds-c-drawer__footer",
        children: [/*#__PURE__*/_jsx("h4", {
          className: "ds-c-drawer__footer-title",
          children: props.footerTitle
        }), /*#__PURE__*/_jsx("div", {
          className: "ds-c-drawer__footer-body",
          children: props.footerBody
        })]
      })]
    })
  });
};
Drawer.defaultProps = {
  hasFocusTrap: false,
  headingLevel: '3'
};
export default Drawer;