import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import uiUtilities from '@teamleader/ui-utilities';
import cx from 'classnames';
import React from 'react';
import { createPortal } from 'react-dom';
import Transition from 'react-transition-group/Transition';
import useFocusTrap from '../../utils/useFocusTrap';
import Box from '../box';
import Overlay from '../overlay/Overlay';
import * as DialogBody from './Body';
import * as DialogFooter from './Footer';
import * as DialogHeader from './Header';
import theme from './theme.css';
import useDraggable from './useDraggable';
export var DialogBase = function DialogBase(_ref) {
  var _ref$active = _ref.active,
      active = _ref$active === void 0 ? false : _ref$active,
      _ref$backdrop = _ref.backdrop,
      backdrop = _ref$backdrop === void 0 ? 'dark' : _ref$backdrop,
      children = _ref.children,
      className = _ref.className,
      onEscKeyDown = _ref.onEscKeyDown,
      onOverlayClick = _ref.onOverlayClick,
      _ref$scrollable = _ref.scrollable,
      scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      initialFocusRef = _ref.initialFocusRef,
      dragHandleRef = _ref.dragHandleRef,
      form = _ref.form,
      onSubmit = _ref.onSubmit;

  var _useFocusTrap = useFocusTrap({
    active: active,
    initialFocusRef: initialFocusRef
  }),
      ref = _useFocusTrap.ref,
      FocusRing = _useFocusTrap.FocusRing;

  useDraggable({
    active: active,
    dragTargetRef: ref,
    dragHandleRef: dragHandleRef
  });

  if (!active) {
    return null;
  }

  var dialog = /*#__PURE__*/React.createElement(Transition, {
    timeout: 0,
    in: active,
    appear: true
  }, function (state) {
    var _cx;

    var dialogClassNames = cx(uiUtilities['box-shadow-300'], theme['dialog-base'], theme["is-".concat(size)], (_cx = {}, _defineProperty(_cx, theme['is-entering'], state === 'entering'), _defineProperty(_cx, theme['is-entered'], state === 'entered'), _cx), className);
    return /*#__PURE__*/React.createElement(Overlay, {
      active: active,
      backdrop: backdrop,
      className: theme['overlay'],
      onOverlayClick: onOverlayClick,
      onEscKeyDown: onEscKeyDown
    }, /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(Box, _extends({
      element: form ? 'form' : 'div',
      ref: ref,
      "data-teamleader-ui": "dialog",
      className: dialogClassNames
    }, form && {
      onSubmit: onSubmit
    }), /*#__PURE__*/React.createElement("div", {
      className: theme['inner']
    }, scrollable ? /*#__PURE__*/React.createElement(Box, {
      display: "flex",
      flexDirection: "column",
      overflowY: "auto"
    }, children) : children))));
  });
  return /*#__PURE__*/createPortal(dialog, document.body);
};
DialogBase.Header = DialogHeader.default;
DialogBase.Body = DialogBody.default;
DialogBase.Footer = DialogFooter.default;
export default DialogBase;