import React from "preact/compat";
import Button from "../Button/Button";
import NativeDialog from "../NativeDialog/NativeDialog";
import { useRef } from "preact/compat";
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.
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/drawer/).
 */
export var Drawer = function Drawer(props) {
  var _props$ariaLabel, _props$closeButtonTex;
  var headingRef = useRef(null);
  var headingId = useId('drawer--', props.headingId);
  var Heading = "h".concat(props.headingLevel);
  return /*#__PURE__*/React.createElement(NativeDialog, {
    className: classNames(props.className, 'ds-c-drawer'),
    exit: props.onCloseClick,
    showModal: props.hasFocusTrap
  }, /*#__PURE__*/React.createElement("div", {
    className: "ds-c-drawer__window",
    tabIndex: -1,
    "aria-labelledby": headingId
  }, /*#__PURE__*/React.createElement("div", {
    className: "ds-c-drawer__header"
  }, /*#__PURE__*/React.createElement(Heading, {
    id: headingId,
    className: "ds-c-drawer__header-heading",
    ref: function ref(el) {
      headingRef.current = el;
      if (props.headingRef) {
        props.headingRef.current = el;
      }
    }
  }, props.heading), /*#__PURE__*/React.createElement(Button, {
    "aria-label": (_props$ariaLabel = props.ariaLabel) !== null && _props$ariaLabel !== void 0 ? _props$ariaLabel : t('drawer.ariaLabel'),
    className: "ds-c-drawer__close-button",
    size: "small",
    onClick: props.onCloseClick,
    variation: props.closeButtonVariation
  }, (_props$closeButtonTex = props.closeButtonText) !== null && _props$closeButtonTex !== void 0 ? _props$closeButtonTex : t('drawer.closeButtonText'))), /*#__PURE__*/React.createElement("div", {
    className: classNames('ds-c-drawer__body', {
      'ds-c-drawer--is-sticky': props.isHeaderSticky || props.isFooterSticky
    }),
    tabIndex: 0
  }, props.children), (props.footerTitle || props.footerBody) && /*#__PURE__*/React.createElement("div", {
    className: "ds-c-drawer__footer"
  }, /*#__PURE__*/React.createElement("h4", {
    className: "ds-c-drawer__footer-title"
  }, props.footerTitle), /*#__PURE__*/React.createElement("div", {
    className: "ds-c-drawer__footer-body"
  }, props.footerBody))));
};
Drawer.defaultProps = {
  headingLevel: '3',
  hasFocusTrap: false
};
export default Drawer;