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, 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 {
    ariaLabel,
    backdropClickExits,
    children,
    className,
    closeButtonText,
    closeButtonVariation,
    footerBody,
    footerTitle,
    hasFocusTrap,
    heading,
    headingId: userHeadingId,
    headingLevel,
    headingRef: userHeadingRef,
    isFooterSticky,
    isHeaderSticky,
    isOpen,
    onCloseClick,
    ...otherProps
  } = props;
  const headingRef = useRef(null);
  const headingId = useId('drawer--', userHeadingId);
  const Heading = `h${headingLevel}`;
  return /*#__PURE__*/_jsx(NativeDialog, {
    className: classNames(className, 'ds-c-drawer'),
    exit: onCloseClick,
    showModal: hasFocusTrap,
    backdropClickExits: backdropClickExits,
    isOpen: isOpen,
    "aria-labelledby": headingId,
    ...otherProps,
    children: /*#__PURE__*/_jsxs("div", {
      className: "ds-c-drawer__window",
      tabIndex: isFooterSticky && -1,
      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 (userHeadingRef) {
              userHeadingRef.current = el;
            }
          },
          children: heading
        }), /*#__PURE__*/_jsx(Button, {
          "aria-label": ariaLabel ?? t('drawer.ariaLabel'),
          className: "ds-c-drawer__close-button",
          size: "small",
          onClick: onCloseClick,
          variation: closeButtonVariation,
          children: closeButtonText ?? t('drawer.closeButtonText')
        })]
      }), /*#__PURE__*/_jsx("div", {
        className: classNames('ds-c-drawer__body', {
          'ds-c-drawer--is-sticky': isHeaderSticky || isFooterSticky
        }),
        tabIndex: 0,
        children: children
      }), (footerTitle || footerBody) && /*#__PURE__*/_jsxs("div", {
        className: "ds-c-drawer__footer",
        children: [/*#__PURE__*/_jsx("h4", {
          className: "ds-c-drawer__footer-title",
          children: footerTitle
        }), /*#__PURE__*/_jsx("div", {
          className: "ds-c-drawer__footer-body",
          children: footerBody
        })]
      })]
    })
  });
};
Drawer.defaultProps = {
  hasFocusTrap: false,
  headingLevel: '3'
};
export default Drawer;