<script setup>
import Toast from "primevue/toast";
import T from "./T.js"

const props = defineProps({
	group: null
})

let group = props.group
if (T.isNull(group)) {
	group = "tc"
}

const onClose = e => {
	if (typeof e.message.onClose === "function") {
		e.message.onClose.call(e.message, e)
	}
}

</script>

<template>
	<Toast position="center" :group="group" @close="onClose" @life-end="onClose" :closeButtonProps="{

	}">
		<template #message="slotProps">
			<span>
				<i class="pi pi-info-circle" v-if="slotProps.message.severity == 'info'"></i>
				<i class="pi pi-check" v-if="slotProps.message.severity == 'success'"></i>
				<i class="pi pi-exclamation-triangle" v-if="slotProps.message.severity == 'warn'"></i>
				<i class="pi pi-times-circle" v-if="slotProps.message.severity == 'error'"></i>
			</span>

			<div class="p-toast-message-text">
				<div class="p-toast-summary flex items-center gap-2">
					<span>{{ slotProps.message.summary }}</span>
				</div>

				<div class="p-toast-detail" v-if="slotProps.message.detail.startsWith('html:')">
					<div v-html="slotProps.message.detail.substring('html:'.length)"></div>
				</div>
				<div class="p-toast-detail" v-else>
					{{ slotProps.message.detail }}
				</div>
			</div>
		</template>
	</Toast>
</template>

<style scoped lang="postcss">
.p-toast-detail {
	font-size: 1rem;
}
</style>