function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import * as React from 'react';
import { useContext } from 'react';
import { useUID } from 'react-uid';
import { DraggableModalContext } from "./DraggableModalContext";
import { DraggableModalInner } from "./DraggableModalInner";
import { getModalState } from "./draggableModalReducer";
export var DraggableModal = function DraggableModal(props) {
  // Get the unique ID of this modal.
  var id = useUID();

  // Get modal provider.
  var modalProvider = useContext(DraggableModalContext);
  if (!modalProvider) {
    throw new Error('No Provider');
  }
  var dispatch = modalProvider.dispatch,
    state = modalProvider.state;
  var modalState = getModalState({
    state: state,
    id: id,
    initialHeight: props.initialHeight,
    initialWidth: props.initialWidth
  });

  // We do this so that we don't re-render all modals for every state change.
  // DraggableModalInner uses React.memo, so it only re-renders if
  // if props change (e.g. modalState).
  return /*#__PURE__*/React.createElement(DraggableModalInner, _extends({
    id: id,
    dispatch: dispatch,
    modalState: modalState
  }, props));
};