import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/* "use client" */

import React, { useEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import usePortal from '../utils/use-portal';
import ModalWrapper from './modal-wrapper';
import ModalAction from './modal-action';
import ModalActions from './modal-actions';
import { Backdrop } from '@helpdice/theme';
import { ModalContext } from './modal-context';
import { pickChild } from '../utils/collections';
import useBodyScroll from '../utils/use-body-scroll';
import useScale, { withScale } from '../use-scale';
import useKeyboard, { KeyCode } from '../use-keyboard';
var ModalComponent = function ModalComponent(_ref) {
  var customVisible = _ref.visible,
    onClose = _ref.onClose,
    children = _ref.children,
    _ref$keyboard = _ref.keyboard,
    keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard,
    _ref$wrapClassName = _ref.wrapClassName,
    wrapClassName = _ref$wrapClassName === void 0 ? '' : _ref$wrapClassName,
    onContentClick = _ref.onContentClick,
    _ref$disableBackdropC = _ref.disableBackdropClick,
    disableBackdropClick = _ref$disableBackdropC === void 0 ? false : _ref$disableBackdropC,
    _ref$positionClassNam = _ref.positionClassName,
    positionClassName = _ref$positionClassNam === void 0 ? '' : _ref$positionClassNam,
    _ref$backdropClassNam = _ref.backdropClassName,
    backdropClassName = _ref$backdropClassNam === void 0 ? '' : _ref$backdropClassNam,
    _ref$layerClassName = _ref.layerClassName,
    layerClassName = _ref$layerClassName === void 0 ? '' : _ref$layerClassName;
  var portal = usePortal('modal');
  var _useScale = useScale(),
    SCALES = _useScale.SCALES;
  var _useBodyScroll = useBodyScroll(null, {
      delayReset: 300
    }),
    _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
    setBodyHidden = _useBodyScroll2[1];
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  var _pickChild = pickChild(children, ModalAction),
    _pickChild2 = _slicedToArray(_pickChild, 2),
    withoutActionsChildren = _pickChild2[0],
    ActionsChildren = _pickChild2[1];
  var hasActions = ActionsChildren && React.Children.count(ActionsChildren) > 0;
  var closeModal = function closeModal() {
    onClose && onClose();
    setVisible(false);
    setBodyHidden(false);
  };
  useEffect(function () {
    if (typeof customVisible === 'undefined') return;
    setVisible(customVisible);
    setBodyHidden(customVisible);
  }, [customVisible]);
  var _useKeyboard = useKeyboard(function () {
      keyboard && closeModal();
    }, KeyCode.Escape, {
      disableGlobalEvent: true
    }),
    bindings = _useKeyboard.bindings;
  var closeFromBackdrop = function closeFromBackdrop() {
    if (disableBackdropClick) return;
    closeModal();
  };
  var modalConfig = useMemo(function () {
    return {
      close: closeModal
    };
  }, []);
  if (!portal) return null;
  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(ModalContext.Provider, {
    value: modalConfig
  }, /*#__PURE__*/React.createElement(Backdrop, _extends({
    onClick: closeFromBackdrop,
    onContentClick: onContentClick,
    visible: visible,
    width: SCALES.width(26),
    positionClassName: positionClassName,
    backdropClassName: backdropClassName,
    layerClassName: layerClassName
  }, bindings), /*#__PURE__*/React.createElement(ModalWrapper, {
    visible: visible,
    className: wrapClassName
  }, withoutActionsChildren, hasActions && /*#__PURE__*/React.createElement(ModalActions, null, ActionsChildren)))), portal);
};
ModalComponent.displayName = 'Modal';
var Modal = withScale(ModalComponent);
export default Modal;