<script lang="ts" setup>
import type { IconType, NavLink } from '@bagelink/vue'
import { Icon } 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 < 1100

	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>
