<script setup>
import {inject, onUnmounted, provide, ref} from "vue";
import PopupStates from "@/utils/popup_states.js";
import TProgressBar from "@/components/ui/TProgressBar.vue";
import EventBus from "@/lib/events.js";

const isInDynamicDialog = inject("$inDialogDynamic", false)
provide("$popupLayout", isInDynamicDialog)

const states = new PopupStates()
provide("$popupState", states.last())

// loading progress
const maskVisible = ref(false)

const bus = new (EventBus)
const showListener = () => {
	maskVisible.value = true
}
bus.on("showLoadingBar", showListener)

const hideListener = () => {
	setTimeout(() => maskVisible.value = false, 200)
}
bus.on("hideLoadingBar", hideListener)

onUnmounted(() => {
	states.pop()

	bus.remove("showLoadingBar", showListener)
	bus.remove("hideLoadingBar", hideListener)
})

const keyRef = ref()

</script>

<template>
	<div :key="keyRef">
		<slot></slot>
	</div>

	<div class="fixed top-0 left-0 right-0" style="z-index: 999999">
		<TProgressBar class="w-full" style="height: 0.2em" mode="indeterminate" v-if="maskVisible"></TProgressBar>
	</div>
</template>

<style lang="postcss" scoped>
:deep(td a), :deep(.comment a) {
	color: var(--p-primary-color);
}

:deep(td a:hover), :deep(.comment a:hover) {
	color: var(--p-primary-700);
}

:deep(h3), :deep(h4), :deep(h5), :deep(header) {
	@apply my-4;
}

:deep(td em) {
	font-style: normal;
	font-size: 0.9em;
	font-weight: 400;
	@apply text-gray-500;
}

</style>