import _pt from "prop-types";
import Button from '../Button/Button';
import NativeDialog from '../NativeDialog/NativeDialog';
import React, { useRef } from 'react';
import classNames from 'classnames';
import uniqueId from 'lodash/uniqueId';
import { t } from '../i18n'; // 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.

export var Drawer = function Drawer(props) {
  var _props$ariaLabel, _props$closeButtonTex;

  var headingRef = useRef(null);
  var id = useRef(props.headingId || uniqueId('drawer_'));
  var Heading = "h".concat(props.headingLevel);
  return /*#__PURE__*/React.createElement(NativeDialog, {
    "aria-labelledby": id.current,
    className: classNames(props.className, 'ds-c-drawer'),
    exit: props.onCloseClick,
    showModal: props.hasFocusTrap
  }, /*#__PURE__*/React.createElement("div", {
    className: "ds-c-drawer__window"
  }, /*#__PURE__*/React.createElement("div", {
    className: "ds-c-drawer__header"
  }, /*#__PURE__*/React.createElement(Heading, {
    tabIndex: 0,
    id: id.current,
    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 ds-u-fill--white",
    size: "small",
    onClick: props.onCloseClick
  }, (_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
    })
  }, props.children), /*#__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.propTypes = {
  /**
     * Gives more context to screen readers on the Drawer close button.
     */
  ariaLabel: _pt.string,
  closeButtonText: _pt.node,
  children: _pt.node.isRequired,
  className: _pt.string,
  footerBody: _pt.node,
  footerTitle: _pt.string,

  /**
     * Enables focus trap functionality within Drawer.
     */
  hasFocusTrap: _pt.bool,

  /**
     * Text for the Drawer heading. Required because the `heading` will be focused on mount.
     */
  heading: _pt.oneOfType([_pt.string, _pt.node]).isRequired,

  /**
     * A unique `id` to be used on heading element to label multiple instances of Drawer.
     */
  headingId: _pt.string,

  /**
     * Heading type to override default `<h3>`
     */
  headingLevel: _pt.oneOf(['1', '2', '3', '4', '5']),

  /**
     * Enables "sticky" position of Drawer header element.
     */
  isHeaderSticky: _pt.bool,

  /**
     * Enables "sticky" position of Drawer footer element.
     */
  isFooterSticky: _pt.bool,
  onCloseClick: _pt.func.isRequired
};
Drawer.defaultProps = {
  headingLevel: '3',
  hasFocusTrap: false
};
export default Drawer;