import React from "react";
import { CSSTransition } from "react-transition-group";
import cx from "classnames";
import makeStyles from "../styles/makeStyles";
var getClasses = makeStyles({
  root: {
    // Improve scrollable dialog support.
    zIndex: -1,
    position: "fixed",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    right: 0,
    bottom: 0,
    top: 0,
    left: 0,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    WebkitTapHighlightColor: "transparent"
  },
  enter: {
    opacity: 0
  },
  enterActive: {
    opacity: 1,
    // Enter time is the same as the Fade component of MUI v4
    transition: "opacity 225ms"
  },
  exit: {
    opacity: 1
  },
  exitActive: {
    opacity: 0,
    // Exit time is the same as the Fade component of MUI v4
    transition: "opacity 195ms"
  }
});

function Backdrop(_ref, ref) {
  var className = _ref.className,
      open = _ref.open,
      onClick = _ref.onClick,
      children = _ref.children;
  var classes = getClasses();
  return (
    /*#__PURE__*/
    // This ts-ignore is due to an inconsistency with react types, it can be deleted
    // when React is updated to v18

    /* @ts-ignore */
    React.createElement(CSSTransition, {
      "in": open,
      classNames: {
        enter: classes.enter,
        enterActive: classes.enterActive,
        exit: classes.exit,
        exitActive: classes.exitActive
      },
      timeout: 200,
      mountOnEnter: true,
      unmountOnExit: true
    }, /*#__PURE__*/React.createElement("div", {
      className: cx(classes.root, className),
      onClick: onClick,
      "aria-hidden": true,
      ref: ref
    }, children))
  );
}

export default /*#__PURE__*/React.forwardRef(Backdrop);