import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React from "react";
import { DialogOverlay, DialogContent } from "@reach/dialog";
import cx from "classnames";
import { LazyMotion, m, domMax, AnimatePresence } from "framer-motion";
import { SlotsProvider } from "nano-slots";
import useDialogCount from "./useDialogCount";
import Topbar from "./Topbar";
import getClasses from "./styles";
var DialogContentAnimated = m(DialogContent);
var DialogOverlayAnimated = m(DialogOverlay);
var overlayAnimationVariants = {
  open: {
    backgroundColor: "rgba(0,0,0, .6)",
    transition: {
      duration: 0.2,
      ease: "easeIn"
    }
  },
  closed: {
    backgroundColor: "rgba(0,0,0, .0)",
    transition: {
      duration: 0.35,
      ease: "easeOut"
    }
  }
};
var dialogAnimationVariants = {
  open: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.2,
      ease: "easeOut"
    }
  },
  closed: {
    opacity: 0,
    scale: 0.8,
    transition: {
      duration: 0.17,
      ease: "easeIn"
    }
  }
};

function CleverDialog(_ref) {
  var _cx;

  var open = _ref.open,
      onClose = _ref.onClose,
      children = _ref.children,
      className = _ref.className,
      initialFocusRef = _ref.initialFocusRef,
      _ref$fullWidth = _ref.fullWidth,
      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
      _ref$debugName = _ref.debugName,
      debugName = _ref$debugName === void 0 ? "" : _ref$debugName,
      _ref$hideTopbar = _ref.hideTopbar,
      hideTopbar = _ref$hideTopbar === void 0 ? false : _ref$hideTopbar,
      globalWidth = _ref.globalWidth;
  var classes = getClasses();

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      maximized = _React$useState2[0],
      setMaximized = _React$useState2[1];

  var containerRef = React.useRef(null);

  var _useDialogCount = useDialogCount(open, debugName),
      number = _useDialogCount.number,
      isOnTop = _useDialogCount.isOnTop;

  var contentMaxWidth = fullWidth ? "100%" : "min(48em, 100%)";
  return /*#__PURE__*/React.createElement(SlotsProvider, null, /*#__PURE__*/React.createElement(LazyMotion, {
    features: domMax
  }, /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(DialogOverlayAnimated, {
    variants: number === 0 && overlayAnimationVariants,
    initial: "closed",
    animate: "open",
    exit: "closed",
    "data-dialog-number": number,
    style: {
      "--cle-dialog-dialog-position": number
    },
    isOpen: open,
    onDismiss: onClose,
    className: classes.overlay,
    initialFocusRef: initialFocusRef
  }, /*#__PURE__*/React.createElement(DialogContentAnimated, {
    variants: dialogAnimationVariants,
    initial: "closed",
    animate: "open",
    exit: "closed",
    layout: true,
    "aria-labelledby": "dialog-title-".concat(number),
    style: {
      "--cle-dialog-global-width": globalWidth
    },
    className: cx(classes.content, (_cx = {}, _defineProperty(_cx, classes.larged, maximized), _defineProperty(_cx, classes.noMaxWidth, globalWidth != null), _defineProperty(_cx, "js-modal", true), _cx), className)
  }, !hideTopbar && /*#__PURE__*/React.createElement(Topbar, {
    disabled: !isOnTop,
    onClose: onClose,
    onChangeSize: function onChangeSize() {
      return setMaximized(function (isMaximized) {
        return !isMaximized;
      });
    },
    maximized: maximized
  }), /*#__PURE__*/React.createElement(m.div, {
    className: classes.wrapper,
    ref: containerRef,
    style: {
      "--cle-dialog-wrapper-inner-max-width": contentMaxWidth
    }
  }, /*#__PURE__*/React.createElement(m.div, {
    layout: "position",
    className: classes.wrapperInner,
    onLayoutMeasure: function onLayoutMeasure() {
      // Hide all scrollbars while the dialog is animating
      containerRef.current.style.overflow = "hidden";
    },
    onLayoutAnimationComplete: function onLayoutAnimationComplete() {
      // Show the scrollbars again after the animation is complete
      containerRef.current.style.overflow = null;
    }
  }, children)))))));
}

export default CleverDialog;