<script lang="ts" setup>
import type { BtnOptions } from '@bagelink/vue'
import type { SetupContext } from 'vue'
import {
	Btn,
	Card,
	Title,
	useEscape
} from '@bagelink/vue'
import {
	onMounted,
	onUnmounted,
	useSlots,
	watch
} from 'vue'
import '../styles/modal.css'

interface ModalProps {
	thin?: boolean
	side?: boolean
	title?: string
	width?: string
	dismissable?: boolean
	actions?: BtnOptions[]
	visible?: boolean
}
const props = withDefaults(defineProps<ModalProps>(), {
	thin: false,
	side: false,
	dismissable: true,
	visible: false,
})

const emit = defineEmits(['update:visible'])

const slots: SetupContext['slots'] = useSlots()

let isVisible = $ref<boolean>(false)

watch(
	() => props.visible,
	(val) => {
		if (val === isVisible || val === undefined) return
		if (val) openModal()
		else closeModal()
	},
	{ immediate: true },
)

const maxWidth = $computed(() => {
	const { width } = props
	if (width?.match(/px|em|rem|vw|vh|%/)) return { 'max-width': width }
	if (width?.match(/\d+/)) return { 'max-width': `${width}px` }
	return { 'max-width': '720px' }
})

function closeModal() {
	isVisible = false
	setTimeout(() => { emit('update:visible', false) }, 200)
}

defineExpose({ closeModal })

const escapeKeyClose = (e: KeyboardEvent) => props.dismissable && useEscape(e, () => { closeModal() })

function openModal() {
	setTimeout(() => (isVisible = true), 1)
}

onMounted(() => { document.addEventListener('keydown', escapeKeyClose) })

onUnmounted(() => {
	document.removeEventListener('keydown', escapeKeyClose)
})
</script>

<template>
	<div
		class="bg-dark"
		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
		@click="() => (dismissable ? closeModal() : '')"
		@keydown.esc="closeModal"
	>
		<Card class="modal" :style="{ ...maxWidth }" :thin="thin" @click.stop>
			<header v-if="slots.toolbar || title" class="tool-bar">
				<slot name="toolbar" />
				<Btn
					v-if="dismissable"
					:style="{ float: side ? 'left' : 'right' }"
					flat
					icon="close"
					thin
					@click="closeModal"
				/>
				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
			</header>

			<div v-else class="sticky z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
				<Btn
					v-if="dismissable"
					class="position-start"
					icon="close"
					thin
					round
					color="white"
					@click="closeModal"
				/>
			</div>
			<slot />
			<footer v-if="slots.footer || actions?.length" class="modal-footer mt-1">
				<Btn
					v-for="(action, i) in actions"
					:key="i"
					color="gray"
					v-bind="action"
					@click="closeModal"
				/>
				<slot name="footer" />
			</footer>
		</Card>
	</div>
</template>

<style>
.modal{
	color: var(--bgl-popup-text);
	/* display: flex;
	flex-direction: column; */
}
.modal-title {
	text-align: center;
	font-weight: 600;
	font-size: 20px;
	margin-top: 0.5rem;
	margin-bottom: 0 !important;
	width: 100%;
	line-height: 2;
	display: -webkit-box;
	max-width: 100%;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modal-footer {
	gap: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-footer > div {
	gap: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.modal-no-title{
	width: calc(100% + 2rem);
	border-radius: var(--card-border-radius);

}
</style>
