import useResizeObserver from 'use-resize-observer';
import warning from 'warning';
import { browserSupports } from '../utils/componentUtilityFunctions.js';

/**
 * A wrapper hook around useResizeObserver to throw a warning if the environment does not support
 * ResizeObserver.
 *
 * @param {Object} object An optional object containing initialHeight, initialWidth, and a ref. ie. {initialHeight: 0, initialWidth: 0, ref}
 * @returns Array an array containing an object with height and width, and the ref. ie. [{height, width}, ref]
 */
var useSizeObserver = function useSizeObserver() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    _ref$initialHeight = _ref.initialHeight,
    initialHeight = _ref$initialHeight === void 0 ? 0 : _ref$initialHeight,
    _ref$initialWidth = _ref.initialWidth,
    initialWidth = _ref$initialWidth === void 0 ? 0 : _ref$initialWidth,
    _ref$ref = _ref.ref,
    ref = _ref$ref === void 0 ? undefined : _ref$ref;
  // eslint-disable-next-line react-hooks/rules-of-hooks
  var _useResizeObserver = useResizeObserver({
      ref: ref
    }),
    _useResizeObserver$he = _useResizeObserver.height,
    height = _useResizeObserver$he === void 0 ? initialHeight : _useResizeObserver$he,
    _useResizeObserver$wi = _useResizeObserver.width,
    width = _useResizeObserver$wi === void 0 ? initialWidth : _useResizeObserver$wi,
    observerRef = _useResizeObserver.ref;

  // Check for ResizeObserver support
  var supportsResizeObserver = browserSupports('ResizeObserver');
  if (!supportsResizeObserver) {
    warning(!("development" !== "production"), 'The current browser does not support ResizeObserver. You will need to include a ResizeObserver polyfill for this component to function properly.') ;
    return [{
      height: initialHeight,
      width: initialWidth
    }, ref];
  }
  return [{
    height: height,
    width: width
  }, observerRef];
};
var useSizeObserver$1 = useSizeObserver;

export { useSizeObserver$1 as default };
