import { Resizer } from "~/index";

// true 为手机
const isPhone = ref(false);
// true 为平板
const isTablet = ref(false);
// true 为桌面
const isDesktop = ref(false);
// true 为大屏幕
const isLargeScreen = ref(false);

// true 为竖屏
const isVertical = ref(false);
// true 为横屏
const isHorizontal = ref(false);
// 宽高比
const aspectRatio = ref(0);
// true 为超宽屏
const isUltrawide = ref(false);
// true 为近似方屏
const isSquare = ref(false);

// 当前断点
const currentBreakpoint = ref<"xs" | "sm" | "md" | "lg" | "xl">("lg");
// 当前屏幕宽度
const screenWidth = ref(0);
// 当前屏幕高度
const screenHeight = ref(0);
// 短屏幕（高度小于 500）
const isShortScreen = ref(false);
// true 为启用移动端布局
const isMobileLayout = ref(false);

/** 断点配置，单位：px */
enum Breakpoints {

	/** 超小设备 */
	XS = 480,

	/** 手机 */
	SM = 650,

	/** 平板 */
	MD = 768,

	/** 笔记本 */
	LG = 1024,

	/** 大屏幕 */
	XL = 1440
}

Resizer.addListener("DEVICE_SIZE", (width, height) => {
	screenWidth.value = width;
	screenHeight.value = height;

	// 设备类型
	isPhone.value = width < Breakpoints.SM;
	isTablet.value = width >= Breakpoints.SM && width < Breakpoints.LG;
	isDesktop.value = width >= Breakpoints.LG;
	isLargeScreen.value = width >= Breakpoints.XL;

	// 屏幕方向
	isVertical.value = width < height;
	isHorizontal.value = !isVertical.value;

	// 宽高比特征
	aspectRatio.value = width / height;
	isUltrawide.value = 2 <= aspectRatio.value; // 21:9 ≈ 2.33
	isSquare.value = 0.9 < aspectRatio.value && aspectRatio.value < 1.1;

	// 布局相关
	isShortScreen.value = height < 500;
	isMobileLayout.value = width < Breakpoints.MD;

	if (Breakpoints.XL <= width) {
		currentBreakpoint.value = "xl";
	} else if (Breakpoints.LG <= width) {
		currentBreakpoint.value = "lg";
	} else if (Breakpoints.MD <= width) {
		currentBreakpoint.value = "md";
	} else if (Breakpoints.SM <= width) {
		currentBreakpoint.value = "sm";
	} else {
		currentBreakpoint.value = "xs";
	}
});

const deviceStore = {
	isPhone,
	isTablet,
	isDesktop,
	isLargeScreen,

	isVertical,
	isHorizontal,
	aspectRatio,
	isUltrawide,
	isSquare,

	currentBreakpoint,
	screenWidth,
	screenHeight,
	isShortScreen,
	isMobileLayout
};

export {
	deviceStore
};