import { useState, useEffect } from 'react';
import { useContainerBreakpointIsAtMost } from "../../../hooks/breakpoint/index.js";
import useResizeObserver from "../../../hooks/useResizeObserver/index.js";
import { NATIONAL_SIZE } from "../../maps/index.js";
const desktop = [[0, 0], [NATIONAL_SIZE[0], NATIONAL_SIZE[1]]];
function useMapExtent({
  zoomable,
  layout
}) {
  const [ref, [width]] = useResizeObserver();
  const atMostMd = useContainerBreakpointIsAtMost('md');
  const [mapExtent, setMapExtent] = useState(desktop);
  useEffect(() => {
    const hasPannedExtent = zoomable && atMostMd && layout !== 'module';
    if (hasPannedExtent) {
      setMapExtent([desktop[0], [width, desktop[1][1]]]);
    } else {
      setMapExtent(desktop);
    }
  }, [atMostMd, width, zoomable, layout]);
  return [ref, mapExtent, setMapExtent];
}
export default useMapExtent;