<script setup lang="ts">
import { computed } from "vue";

import { LOGIN_LINK } from "@/lib/constants";
import { useApiStore } from "@/stores/api";

const api = useApiStore();
const user = computed(() => api.user);
const actors = computed(() => api.actors);

const isAuthenticated = computed(() => api.isAuthenticated);
</script>

<template>
	<div class="login" v-if="!isAuthenticated">
		<h1>You're signed out</h1>
		<p>To access the ticket system, you must be logged in.</p>
		<a :href="LOGIN_LINK">Login</a>
	</div>

	<div class="hi" v-if="isAuthenticated">
		<h1>hi {{ user?.displayName }}</h1>
		<div class="guilds">
			<RouterLink
				v-for="actor in actors"
				:key="actor.actorId"
				:to="`/guilds/${actor.guild?.discordId}/tickets`"
				class="guild"
			>
				<div class="guild-icon">
					<img :src="actor.guild?.icon!" alt="guild icon" />
				</div>
				<div class="guild-name">Go to {{ actor.guild?.name }}</div>
			</RouterLink>
		</div>
	</div>
</template>

<style scoped>
.guilds {
	display: inline-flex;
	flex-direction: column;
	gap: 0.5rem;

	.guild {
		background-color: hsl(var(--crust));
		border-radius: 5rem;

		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem;
		padding-right: 1.5rem;
		text-decoration: none;
		color: hsl(var(--text));

		.guild-icon {
			flex-shrink: 0;
			width: 3rem;
			height: 3rem;
			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

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

.login {
	a {
		display: inline-block;
		margin-top: 0.5rem;
		background-color: hsl(var(--accent));
		color: hsl(var(--surface0));
		padding: 0.5rem 1.5rem;
		border-radius: 5rem;
		text-decoration: none;
	}
}
</style>