<script lang="ts" setup>
import type { NavLink } from '@bagelink/vue'
import type { SetupContext } from 'vue'
import { Btn, Card, Icon, useDebounceFn } from '@bagelink/vue'
import { ref, useSlots } from 'vue'

const props = defineProps<{
	navLinks?: NavLink[]
	expandable?: boolean
	open: boolean
}>()

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

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

const isOpen = ref(props.open)
const toggleMenu = useDebounceFn(() => {
	isOpen.value = !isOpen.value
	emit('update:open', isOpen.value)
})
</script>

<template>
	<div class="vh-100 relative p-05 bgl_sidebar" :class="{ wideNav: isOpen }">
		<Btn
			thin
			color="white"
			class="mb-05 absolute toggleNav
			 z-2 border"
			icon="keyboard_arrow_right"
			@click="toggleMenu"
		/>
		<Card
			class="py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y "
		>
			<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
			<slot v-if="isOpen" name="brand-open" />
			<slot v-if="!navLinks" />
			<Btn
				v-for="(nav, i) in navLinks"
				:key="i"
				v-tooltip.right="{
					content: nav.label,
					disabled: open,
				}"
				v-bind="{
					...(nav.to && { to: nav.to }),
					...(nav.href && { href: nav.href }),
					...(nav.action && { onClick: nav.action }),
				}"
				class="nav-button px-075 me-auto w-100"
			>
				<template #default>
					<Icon :icon="nav.icon" :size="1.4" />
					<transition name="showP">
						<p v-if="open">
							{{ nav.label }}
						</p>
					</transition>
				</template>
			</Btn>
			<div style="flex-grow: 1" />
			<slot name="footer" />
		</Card>
	</div>
</template>

<style>
.nav-button.router-link-active {
	background: var(--bgl-popup-bg) !important;
	color: var(--bgl-primary);
}
.nav-button .bgl_btn-flex{
	justify-content: flex-start !important;
}
</style>

<style scoped>
.bgl_sidebar {
}
.toggleNav {
	height: 22px !important;
	width: 22px !important;
	transition: var(--bgl-transition);
	top: 2rem;
	inset-inline-end: -3px;
}
.toggleNav:hover {
	opacity: 1;
}

.wideNav .toggleNav {
	transform: rotate(180deg);
}

[dir='rtl'] .toggleNav {
	transform: rotate(180deg);
}

[dir='rtl'] .wideNav .toggleNav {
	transform: rotate(0deg);
}

.showP-enter-active,
.showP-leave-active {
  transition: all 0.5s ease;
}

.showP-enter-from,
.showP-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>
