import { useCallback, useSyncExternalStore } from "react";
import {
  findBreakpointOverride,
  getBaseBreakpoint,
  getBreakpointMediaQuery
} from "@makeswift/controls";
import { useBreakpoints } from "../../runtimes/react/hooks/use-breakpoints";
const getDeviceQueries = (breakpoints) => breakpoints.map((device) => ({
  id: device.id,
  query: getBreakpointMediaQuery(device).replace("@media", "")
}));
function useMediaQuery(responsiveValue) {
  const breakpoints = useBreakpoints();
  const baseBreakpointId = getBaseBreakpoint(breakpoints).id;
  const subscribe = useCallback(
    (notify) => {
      const cleanUpFns = getDeviceQueries(breakpoints).map((q) => {
        const mediaQueryList = window.matchMedia(q.query);
        mediaQueryList.addEventListener("change", notify);
        return () => mediaQueryList.removeEventListener("change", notify);
      });
      return () => cleanUpFns.forEach((fn) => fn());
    },
    [breakpoints]
  );
  const getServerSnapshot = () => findBreakpointOverride(breakpoints, responsiveValue, baseBreakpointId)?.value;
  function getSnapshot() {
    const deviceId = getDeviceQueries(breakpoints).reduce(
      (matchedDevice, deviceQueries) => {
        if (window.matchMedia(deviceQueries.query).matches) {
          return deviceQueries.id;
        }
        return matchedDevice;
      },
      baseBreakpointId
    );
    return findBreakpointOverride(breakpoints, responsiveValue, deviceId)?.value;
  }
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}
export {
  useMediaQuery
};
//# sourceMappingURL=useMediaQuery.js.map