import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["open", "onClose", "children", "className", "size", "initialFocusRef"];
import React, { useState } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { DialogOverlay, DialogContent } from "@reach/dialog";
import createComponent from "../../system/createComponent";
import { DialogContext } from "./DialogContext";
import DialogHeader from "./DialogHeader";
import DialogBody from "./DialogBody";
import DialogFooter from "./DialogFooter";
import DialogTitle from "./DialogTitle";
import getClasses from "./styles";
var Sizes;

(function (Sizes) {
  Sizes["medium"] = "medium";
  Sizes["large"] = "large";
})(Sizes || (Sizes = {}));

var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var open = props.open,
      onClose = props.onClose,
      children = props.children,
      className = props.className,
      size = props.size,
      initialFocusRef = props.initialFocusRef,
      htmlProps = _objectWithoutProperties(props, _excluded);

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      titleId = _useState2[0],
      setTitleId = _useState2[1];

  var classes = getClasses();
  var contentClasses = cx(_defineProperty({}, classes.large, size === Sizes.large), classes.content, className);
  var ariaTitle = titleId ? {
    "aria-labelledby": titleId
  } : {
    "aria-label": "Dialog"
  };
  return /*#__PURE__*/React.createElement(DialogContext.Provider, {
    value: {
      titleId: titleId,
      setTitleId: setTitleId
    }
  }, /*#__PURE__*/React.createElement(DialogOverlay, {
    isOpen: open,
    onDismiss: onClose,
    className: classes.overlay,
    initialFocusRef: initialFocusRef
  }, /*#__PURE__*/React.createElement(DialogContent, _extends({}, ariaTitle, {
    className: contentClasses,
    ref: ref
  }, htmlProps), children)));
});
Dialog.propTypes = {
  size: PropTypes.oneOf(["medium", "large"]),
  className: PropTypes.string,
  // @ts-ignore
  initialFocusRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.instanceOf(Element)
  })])
};
Dialog.defaultProps = {
  size: "medium"
};

if (process.env.NODE_ENV !== "production") {
  Dialog.displayName = "NextDialog";
}

var StyledDialog = createComponent(Dialog); // @ts-ignore

StyledDialog.Header = DialogHeader; // @ts-ignore

StyledDialog.Body = DialogBody; // @ts-ignore

StyledDialog.Footer = DialogFooter; // @ts-ignore

StyledDialog.Title = DialogTitle;
export default StyledDialog;