import { useEffect, useContext } from "react";
import { ThemeContext } from "styled-components";
import { publish } from "pubsub-js";
import { useAppDispatch } from "../../data/react.js";
import { breakpoint } from "../../data/breakpoint/index.js";
import { useMediaQueryList } from "./use-media-query-list.js";
import { HOST_WINDOW_BREAKPOINT_CHANGED } from "../../utils/constants.js";
const useBreakpoint = () => {
  const theme = useContext(ThemeContext);
  const currentBreakpoint = useMediaQueryList(
    [
      `(max-width: ${theme.breakpoints.small})`,
      `(max-width: ${theme.breakpoints.medium})`,
      `(max-width: ${theme.breakpoints.large})`,
      `(max-width: ${theme.breakpoints.xsmall})`
    ],
    ["small", "medium", "large", "xsmall"],
    "large"
  );
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch({ type: breakpoint.change, payload: currentBreakpoint });
    publish(HOST_WINDOW_BREAKPOINT_CHANGED, currentBreakpoint);
  }, [currentBreakpoint, dispatch]);
};
export {
  useBreakpoint
};
