"use strict";

exports.__esModule = true;
exports.useWindowSize = useWindowSize;
exports.isLandscape = exports.isPortrait = exports.useComponentSize = exports.PortraitGrid = exports.Portrait = exports.LandscapeGrid = exports.Landscape = void 0;

var _react = require("react");

var _Landscape = _interopRequireDefault(require("./Landscape"));

exports.Landscape = _Landscape.default;

var _LandscapeGrid = _interopRequireDefault(require("./LandscapeGrid"));

exports.LandscapeGrid = _LandscapeGrid.default;

var _Portrait = _interopRequireDefault(require("./Portrait"));

exports.Portrait = _Portrait.default;

var _PortraitGrid = _interopRequireDefault(require("./PortraitGrid"));

exports.PortraitGrid = _PortraitGrid.default;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const useComponentSize = comRef => {
  const [size, setSize] = (0, _react.useState)({
    width: undefined,
    height: undefined
  });
  (0, _react.useEffect)(() => {
    const sizeObserver = new ResizeObserver((entries, observer) => {
      entries.forEach(({
        target
      }) => {
        setSize(s => ({
          width: target.clientWidth || s.width,
          height: target.clientHeight || s.height
        }));
      });
    });
    sizeObserver.observe(comRef.current);
    return () => sizeObserver.disconnect();
  }, [comRef]);
  return size;
};

exports.useComponentSize = useComponentSize;

function useWindowSize() {
  // Initialize state with undefined width/height so server and client renders match
  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
  const [windowSize, setWindowSize] = (0, _react.useState)({
    width: undefined,
    height: undefined
  });
  (0, _react.useEffect)(() => {
    // Handler to call on window resize
    function handleResize() {
      // console.log('handleResize', window.innerWidth, window.innerHeight);
      // Set window width/height to state but don't let it set 0's
      setWindowSize(d => ({
        width: window.innerWidth || d.width,
        height: window.innerHeight || d.height
      }));
    } // Add event listener


    window.addEventListener("resize", handleResize); // Call handler right away so state gets updated with initial window size

    handleResize(); // Remove event listener on cleanup

    return () => window.removeEventListener("resize", handleResize);
  }, []); // Empty array ensures that effect is only run on mount

  return windowSize;
}

const isPortrait = d => d.width <= d.height;

exports.isPortrait = isPortrait;

const isLandscape = d => d.width > d.height;

exports.isLandscape = isLandscape;