import { useEventListener } from "@vueuse/core";
import { reactive, watch } from "vue";
import { getBrowser } from "../lib/browser";
const browser = reactive(getBrowser());
const events = [];
watch(() => browser.screen, () => {
  events.forEach((ev) => ev());
});
if (typeof window !== "undefined") {
  useEventListener(window, "resize", () => {
    Object.assign(browser, getBrowser());
  });
}
export function useBrowser() {
  return {
    browser,
    onScreenChange(ev, immediate = true) {
      events.push(ev);
      if (immediate)
        ev();
    }
  };
}
