<script setup>
import {inject, ref} from "vue";

const Tea = inject("$Tea")

const props = defineProps(["href", "active", "code"])
const emits = defineEmits(["click"])
const popupState = inject("$popupState", null)

const click = (e) => {
	emits("click", e)
}

let active = props.active
if (typeof (active) == "undefined") {
	var itemCode = ""

	if (popupState != null) {
		if (typeof popupState.ctx.firstMenuItem === "string") {
			itemCode = popupState.ctx.firstMenuItem
		}
	} else {
		if (typeof (window.X_VIEW_CTX.firstMenuItem) === "string") {
			itemCode = window.X_VIEW_CTX.firstMenuItem
		}
	}
	if (itemCode != null && itemCode.length > 0 && props.code != null && props.code.length > 0) {
		if (itemCode.indexOf(",") > 0) {
			active = itemCode.split(",").$contains(props.code)
		} else {
			active = (itemCode == props.code)
		}
	}
}

let href = (props.href == null) ? "" : props.href
if (typeof (href) == "string" && href.length > 0 && href.startsWith(".")) {
	let qIndex = href.indexOf("?")
	if (qIndex >= 0) {
		href = Tea.url(href.substring(0, qIndex)) + href.substring(qIndex)
	} else {
		href = Tea.url(href)
	}
}

const vHref = ref(href)
const vActive = ref(active)

</script>

<template>
	<a :href="vHref" class="flex flex-row items-center" :class="{active:vActive}" @click="click">
		<slot></slot>
	</a>
</template>

<style scoped lang="postcss">
a {
	color: var(--p-text-muted-color);
}
</style>