import { ref, computed, onMounted, onUnmounted } from "vue";
import { isClient, isTouchDevice } from "../_utils/is.mjs";
import { mediaPoint } from "../_utils/global.mjs";
const DEFAULT_SCREEN_SIZE = 0;
const useScreen = () => {
  const width = ref(isClient ? window.innerWidth : DEFAULT_SCREEN_SIZE);
  const isPhoneSize = computed(() => {
    if (isClient) {
      return width.value <= mediaPoint.value.phone;
    }
    return false;
  });
  const isPadSize = computed(() => {
    if (isClient) {
      return width.value > mediaPoint.value.phone && width.value <= mediaPoint.value.pad;
    }
    return false;
  });
  const isPhonePad = computed(() => {
    return isTouchDevice && (isPadSize.value || isPhoneSize.value);
  });
  const onResize = () => {
    width.value = window.innerWidth;
  };
  onMounted(() => {
    window.addEventListener("resize", onResize);
  });
  onUnmounted(() => {
    window.removeEventListener("resize", onResize);
  });
  return {
    isTouchDevice,
    isPhoneSize,
    isPadSize,
    isPhonePad
  };
};
export {
  useScreen
};
