<script lang="ts" setup>
import type { IconType, NavLink } from '@bagelink/vue'
import { Icon, MOBILE_BREAKPOINT } from '@bagelink/vue'
import { onMounted, ref } from 'vue'
import { resolveI18n } from '../i18n'

withDefaults(
	defineProps<{
		footerLinks?: NavLink[]
		links?: NavLink[]
		homeIcon?: IconType
		homeLabel?: string
		homeTo?: string
	}>(),
	{
		homeIcon: 'home',
		homeLabel: 'Home',
		homeTo: '/',
		links: () => [],
		footerLinks: () => [],
	}
)

const isOpen = ref(true)

function calcIsOpen() {
	isOpen.value = window.innerWidth <= MOBILE_BREAKPOINT

	const storedNavOpenVal = localStorage.getItem('navOpen')
	if (storedNavOpenVal === 'true' || storedNavOpenVal === null) { isOpen.value = true }
}

function toggleMenu() {
	isOpen.value = !isOpen.value
	localStorage.setItem('navOpen', `${isOpen.value}`)
}

onMounted(calcIsOpen)
</script>

<template>
	<div :class="{ open: isOpen, closed: !isOpen }">
		<slot name="top" :isOpen="isOpen" />
		<div
			class="nav-expend"
			role="button"
			aria-label="Toggle Navigation"
			tabindex="0"
			@click="toggleMenu"
			@keypress.enter="toggleMenu"
		>
			<Icon icon="chevron_right" class="top-arrow" />
		</div>

		<div class="full-nav">
			<div class="nav-scroll">
				<div class="nav-links-wrapper">
					<component
						:is="link.to ? 'router-link' : 'div'"
						v-for="link in links"
						:key="link.label"
						class="nav-button"
						:to="link.to"
						@click="link.action?.()"
					>
						<Icon :icon="link.icon" />
						<div class="tooltip">
							{{ resolveI18n(link.label) }}
						</div>
					</component>
				</div>
			</div>

			<div class="bot-buttons-wrapper">
				<component
					:is="link.to ? 'router-link' : 'div'"
					v-for="link in footerLinks"
					:key="link.label"
					class="nav-button"
					:to="link.to"
					@click="link.action?.()"
				>
					<Icon :icon="link.icon" />
					<div class="tooltip">
						{{ resolveI18n(link.label) }}
					</div>
				</component>
				<slot name="floor" />
			</div>
		</div>
	</div>
</template>

<style scoped>

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

.nav-expend {
text-align: center;
cursor: pointer;
background: var(--bgl-popup-bg);
color: var(--bgl-primary);
display: flex;
border-radius: 100%;
font-size: 13px;
box-shadow: 0 0 50px 0 var(--bgl-shadow);
height: 22px;
width: 22px;
align-items: center;
justify-content: center;
position: absolute;
top: 82px;
box-sizing: border-box;
padding-inline-start: 2px;
margin-inline-start: 55px;
transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
}

/*
.nav-home-wrapper {
margin-bottom: 30px;
}
*/

.nav-expend {
background: var(--bgl-popup-bg);
}

.nav-expend:hover {
filter: brightness(95%);
box-shadow: 0 0 20px 0 var(--bgl-primary-tint);
}

.nav-expend:active {
filter: var(--bgl-active-filter);
}

.nav {
color: var(--bgl-light-text);
background: var(--bgl-primary);
z-index: 98;
width: 70px;
transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
display: flex;
flex-direction: column;
}

.nav * {
user-select: none;
}

.nav-button {
text-decoration: none;
cursor: pointer;
display: flex;
text-align: start;
align-items: center;
position: relative;
color: var(--bgl-light-text);
transition: all 0.2s ease;
pointer-events: none;
}

.nav-button:hover {
width: fit-content;
pointer-events: all;
}

.nav-button .bgl_icon-font {
font-size: 22px;
margin: 0.25rem 10px;
padding: 10px;
width: 50px;
text-align: center;
height: 45px;
flex-grow: 0;
flex-shrink: 0;
border-radius: 10px;
transition: all 0.2s ease;
pointer-events: all;
}

.nav-button:hover .bgl_icon-font,
.nav-button.router-link-active .bgl_icon-font {
background: var(--bgl-box-bg);
color: var(--bgl-primary);
}

.nav-button:hover .tooltip {
opacity: 1;
pointer-events: all;
}

.tooltip {
background-color: var(--bgl-popup-bg);
color: var(--bgl-primary);
line-height: 1;
padding: 0.5rem;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
border: 5px solid transparent;
white-space: nowrap;
pointer-events: none;
opacity: 0;
margin-inline-start: 1rem;
}

.tooltip:hover {
filter: brightness(95%);
}

.tooltip:active {
filter: brightness(90%);
}

.bot-buttons-wrapper {
margin-top: auto;
width: 100%;
}

.nav-links-wrapper {
direction: ltr;
}

[dir='rtl'] .nav-links-wrapper {
direction: rtl;
}

.nav-scroll {
overflow-y: scroll;
width: 50vw;
direction: rtl;
text-align: end;
margin-inline-end: -7px;
pointer-events: none;
display: flex;
flex-direction: column;
}

.nav::-webkit-scrollbar-thumb {
background-color: transparent;
}

.nav:hover::-webkit-scrollbar-thumb {
background-color: var(--bgl-gray);
}

[dir='rtl'] .nav-scroll {
direction: ltr;
}

.full-nav {
height: 100%;
display: flex;
flex-direction: column;
}

@media screen and (min-width: 910px) {
.nav.open .nav-expend {
	margin-inline-start: 189px;
	transform: rotate(180deg);
}

.nav.open {
	width: 200px;
	text-align: start;
}

.nav.open .tooltip {
	background-color: transparent;
	color: var(--bgl-light-text);
	padding: 0;
	box-shadow: none;
	pointer-events: all;
	opacity: 1;
	margin-inline-start: 0rem;
}

.nav.open .nav-button .bgl_icon-font {
	margin: 0;
	background: transparent;
}

.nav.open .nav-button {
	width: 180px;
	border-radius: 10px;
	margin-inline-start: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.nav.open .nav-button:hover,
.nav.open .nav-button.router-link-active {
	background: var(--bgl-popup-bg);
	color: var(--bgl-primary);
}

.nav.open .nav-button:hover,
.nav.open .nav-button:hover .tooltip,
.nav.open .nav-button.router-link-active .tooltip {
	color: var(--bgl-primary);
}
}

@media screen and (max-width: 910px) {
.full-nav {
	height: auto;
	display: flex;
	flex-direction: row;
	width: calc(100vw - 70px);
	position: absolute;
	inset-inline-end: 0;
	overflow-x: auto;
}

.nav.open {
	width: initial;
}

.nav {
	width: auto;
	display: flex;
	flex-direction: row;
	margin: 0;
	overflow-x: auto;
	justify-content: flex-start;
}

.tooltip {
	opacity: 1;
	background: transparent;
	color: var(--bgl-light-text);
	box-shadow: none;
	font-size: 10px;
	padding: 0;
	margin: 0;
}

.nav-button {
	flex-direction: column;
	margin: 12px 0.25rem;
}

.nav-button .bgl_icon-font {
	padding: 2px 0 0 0;
	margin: 0;
	height: 30px;
	width: 30px;
}

.nav-links-wrapper {
	display: flex;
}

.bot-buttons-wrapper {
	margin-top: 0;
	width: auto;
	display: flex;
}

.nav-scroll {
	overflow-y: visible;
	width: auto;
	direction: auto;
	text-align: start;
	margin-inline-end: 0px;
	pointer-events: all;
	display: flex;
	flex-direction: row;
	margin-inline-end: auto;
}

.nav::-webkit-scrollbar {
	display: none;
}

.nav-expend {
	display: none;
}
}

@media screen and (max-height: 550px) {
.nav.open .nav-button {
	margin-top: 4px;
	margin-bottom: 4px;
}
}

</style>
