<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router'

import { useAuthStore } from './stores/auth'
import { computed, onMounted } from 'vue'
import { avatar } from './utils/discord'

const authStore = useAuthStore()

const user = computed(() => authStore.user)

onMounted(async () => {
  await authStore.getUser()
})
</script>

<template>
  <div class="layout">
    <aside class="sidebar">
	    <div class="links">
      	<RouterLink to="/">Home</RouterLink>
	      <RouterLink to="/tickets">Tickets</RouterLink>
	    </div>

      <div class="user" v-if="user">
        <div class="profile-picture">
          <img :src="avatar(user)" alt="Profile Picture" />
        </div>
        <div class="username">{{ user.nick || user.user.global_name || user.user.username }}</div>
      </div>
    </aside>
    <main class="main">
      <RouterView v-slot="{ Component }">
        <KeepAlive include="TicketsView">
          <component :is="Component" />
        </KeepAlive>
      </RouterView>
    </main>
  </div>
</template>

<style scoped>
.layout {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;

	height: 100vh;
	padding: 0.5rem;
	gap: 0.5rem;

	aside.sidebar {
		flex: 0 0 auto;
		width: 200px;

		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		gap: 0.5rem;

		.links {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 0.5rem;

			a {
				padding: 0.5rem 1rem ;
				border-radius: 5rem;
				background-color: hsla(var(--mantle));
				text-decoration: none;
				color: hsla(var(--subtext1));
				font-weight: 550;

				&:hover {
					background-color: hsla(var(--surface1));
				}
				&:active {
					filter: brightness(0.75)
				}

				&.router-link-active {
					background-color: hsla(var(--accent));
					color: hsla(var(--on-accent));
				}
			}
		}

		.user {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0.5rem;
			border-radius: 2rem;
			background-color: hsla(var(--mantle));
			gap: 0.5rem;
			font-weight: 550;

			.profile-picture {
				flex: 0 0 auto;
				width: 40px;
				height: 40px;
				border-radius: 50%;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 50%;
				}
			}
		}
	}

	main {
		flex: 1;
		background-color: hsla(var(--mantle));
		border-radius: 2rem;
		height: 100%;
		overflow-y: auto;
	}
}
</style>