import PropTypes from 'prop-types';
import classnames from 'classnames';
import ClickAwayListener from 'react-click-away-listener';
import Card from "../../Card/index.js";
import classes from './styles.module.scss';

/**
 * Render a drawer at the bottom of the screen.
 */
const DrawerDisplay = function DrawerDisplay(props) {
  const {
    tooltip,
    children,
    zIndex,
    unstyled,
    ...cardProps
  } = props;
  const {
    active
  } = tooltip.config;
  const onClickAway = () => {
    if (active) {
      tooltip.trigger.deactivate();
    }
  };
  const cardContent = <Card shadow="300" edge="sharp" {...cardProps}>
      {children}
    </Card>;
  return <ClickAwayListener onClickAway={onClickAway}>
      <div className={classnames(classes['tooltip-drawer-display'], {
      [classes.active]: active
    })} style={{
      zIndex
    }}>
        {unstyled ? children : cardContent}
      </div>
    </ClickAwayListener>;
};
DrawerDisplay.defaultProps = {
  children: null,
  zIndex: undefined,
  unstyled: false
};
DrawerDisplay.propTypes = {
  /**
   * A tooltip object as provided by `useTooltip`
   */
  tooltip: PropTypes.shape({
    config: PropTypes.shape({
      active: PropTypes.bool
    }),
    trigger: PropTypes.shape({
      deactivate: PropTypes.func
    })
  }).isRequired,
  /**
   * The children to render inside the tooltip
   */
  children: PropTypes.node,
  /**
   * An override for the tooltip's z-index
   */
  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * Prevent default styles from being attached
   */
  unstyled: PropTypes.bool
};
export default DrawerDisplay;