import type { Component } from "vue";
import { defineStore } from "pinia";

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

	const height = ref(0);
	const title = ref("");
	const backTo = ref<string>();
	const leftRenderer = shallowRef<Component>();
	const leftOwner = ref<string>();
	const rightRenderer = shallowRef<Component>();
	const rightOwner = ref<string>();

	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(path?: string): void {
		backTo.value = path;
	}

	function setTitle(value?: string): void {
		title.value = value || "";
	}

	function setLeftRenderer(renderer?: Component, owner?: string): void {
		leftRenderer.value = renderer;
		leftOwner.value = owner;
	}

	function clearLeft(owner?: string): void {
		if (owner && leftOwner.value !== owner) {
			return;
		}

		leftRenderer.value = undefined;
		leftOwner.value = undefined;
	}

	function setRightRenderer(renderer?: Component, owner?: string): void {
		rightRenderer.value = renderer;
		rightOwner.value = owner;
	}

	function clearRight(owner?: string): void {
		if (owner && rightOwner.value !== owner) {
			return;
		}

		rightRenderer.value = undefined;
		rightOwner.value = undefined;
	}

	return {
		height,
		title,
		backTo,
		leftRenderer,
		rightRenderer,
		isShowing,
		canBack,
		setHeight,
		setBackTo,
		setTitle,
		setLeftRenderer,
		clearLeft,
		setRightRenderer,
		clearRight
	};
});