import { ref } from 'vue';

export const statusBarHeight = ref(20);
export const safeAreaBottom = ref(0);
export const safeAreaTop = ref(20);

export const useSafeArea = () => {
	const initSafeArea = () => {
		try {
			const systemInfo = uni.getSystemInfoSync();
			statusBarHeight.value = systemInfo.statusBarHeight || 20;
			
			const safeAreaInsets = systemInfo.safeAreaInsets || {};
			safeAreaTop.value = safeAreaInsets.top || statusBarHeight.value;
			safeAreaBottom.value = safeAreaInsets.bottom || 0;
		} catch (e) {
			statusBarHeight.value = 20;
			safeAreaBottom.value = 0;
			safeAreaTop.value = 20;
		}
	};

	return {
		statusBarHeight,
		safeAreaBottom,
		safeAreaTop,
		initSafeArea
	};
};

export const initSafeArea = () => {
	try {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight || 20;
		
		const safeAreaInsets = systemInfo.safeAreaInsets || {};
		safeAreaTop.value = safeAreaInsets.top || statusBarHeight.value;
		safeAreaBottom.value = safeAreaInsets.bottom || 0;
	} catch (e) {
		statusBarHeight.value = 20;
		safeAreaBottom.value = 0;
		safeAreaTop.value = 20;
	}
};