export const useNavBarStore = defineStore("nav-bar", () => {
	const route = useRoute();
	const router = useRouter();

	const height = ref(0);
	const title = ref("");
	const backTo = ref<string>();
	const rightIcon = ref("");
	const rightBadge = ref<number>();
	const rightText = ref("");
	const rightTextColor = ref("");
	const rightDisabled = ref(false);
	const rightAction = shallowRef<(() => void | Promise<void>) | undefined>();
	const customTitleVisible = ref(false);
	const customRightVisible = ref(false);

	const isShowing = computed(() => !!router.currentRoute.value.meta.navBarVisible);
	const canBack = computed(() => !!router.currentRoute.value.meta.navBarCanBack);

	watch(
		() => route.meta.navBarTitle,
		(value) => {
			title.value = typeof value === "string" ? value : "";
		},
		{ immediate: true }
	);

	function setHeight(value: number): void {
		height.value = value;
	}

	function setBackTo(value?: string): void {
		backTo.value = value;
	}

	function setRightIcon(value?: string, action?: () => void | Promise<void>): void {
		rightIcon.value = value || "";
		rightBadge.value = undefined;
		rightDisabled.value = false;
		rightAction.value = action;
		if (value) {
			rightText.value = "";
			rightTextColor.value = "";
			customRightVisible.value = false;
		}
	}

	function setRightBadge(value?: number): void {
		rightBadge.value = value === undefined ? undefined : Math.max(0, value);
	}

	function setRightText(value?: string, color?: string, action?: () => void | Promise<void>): void {
		rightText.value = value || "";
		rightTextColor.value = color || "";
		rightDisabled.value = false;
		rightAction.value = action;
		if (value) {
			rightBadge.value = undefined;
			rightIcon.value = "";
			customRightVisible.value = false;
		}
	}

	function setRightDisabled(value: boolean): void {
		rightDisabled.value = value;
	}

	function setCustomTitleVisible(value: boolean): void {
		customTitleVisible.value = value;
	}

	function setCustomRightVisible(value: boolean): void {
		customRightVisible.value = value;
		if (value) {
			rightIcon.value = "";
			rightBadge.value = undefined;
			rightText.value = "";
			rightTextColor.value = "";
			rightDisabled.value = false;
			rightAction.value = undefined;
		}
	}

	function clearRight(): void {
		rightIcon.value = "";
		rightBadge.value = undefined;
		rightText.value = "";
		rightTextColor.value = "";
		rightDisabled.value = false;
		rightAction.value = undefined;
		customRightVisible.value = false;
	}

	return {
		height,
		title,
		backTo,
		rightIcon,
		rightBadge,
		rightText,
		rightTextColor,
		rightDisabled,
		rightAction,
		customTitleVisible,
		customRightVisible,
		isShowing,
		canBack,
		setHeight,
		setBackTo,
		setRightIcon,
		setRightBadge,
		setRightText,
		setRightDisabled,
		setCustomTitleVisible,
		setCustomRightVisible,
		clearRight
	};
});