<script lang="ts">
	import type { IUser } from '$lib/stores/auth';
	import { addToast } from '$lib/stores/toast';
	import Avatar from '../Avatar.svelte';

	let { users = $bindable<IUser[]>([]) }: { users: IUser[] } = $props();
</script>

<div>
	{#each users as u, i}
		<Avatar
			username={u.displayName}
			url={u.avatar}
			onclick={() => {
				users = users.filter((_, index) => index !== i);
			}}
		/>
	{/each}
	<Avatar
		username={'Ajouter un utilisateur'}
		url={'/icons/add-green.svg'}
		onclick={() => {
			let userId = prompt("Entrez l'ID de l'utilisateur à ajouter :");
			if (userId === null || userId.trim() === '') {
				addToast({ title: 'ID utilisateur invalide.' });
				return;
			}
			if (users.map((u) => u.displayName).includes(userId)) {
				addToast({ title: 'Cet utilisateur est déjà ajouté.' });
				return;
			}
			users = [...users, { displayName: userId, avatar: '/img/default-avatar.png' } as IUser];
		}}
	/>
</div>
