import { watch, onMounted, onBeforeMount, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import { useAppStore } from "@/stores/app";

const { body } = document;
const WIDTH = 992; // refer to Bootstrap's responsive design

export function useResize() {
  const route = useRoute();
  const appStore = useAppStore();

  watch(route, () => {
    if (appStore.device === "mobile" && appStore.sidebar.opened) {
      appStore.closeSidebar(false);
    }
  });

  const isMobile = () => {
    const rect = body.getBoundingClientRect();
    return rect.width - 1 < WIDTH;
  };

  const resizeHandler = () => {
    if (!document.hidden) {
      const mobile = isMobile();
      appStore.toggleDevice(mobile ? "mobile" : "desktop");
      if (mobile) {
        appStore.closeSidebar(true);
      }
    }
  };

  onBeforeMount(() => {
    window.addEventListener("resize", resizeHandler);
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeHandler);
  });

  onMounted(() => {
    const mobile = isMobile();
    if (mobile) {
      appStore.toggleDevice("mobile");
      appStore.closeSidebar(true);
    }
  });
}