<script lang="ts">
	import { post, showMessage } from 'src/lib/requests.svelte';
	import type { Base } from './types';
	import { notificationStore } from 'src/lib/NotificationsStore.svelte';
	import type { User } from 'src/routes/UserStore.svelte';
	import Spinner from 'src/lib/Spinner.svelte';
	import Tooltip from 'src/lib/Tooltip.svelte';

	let { item }: { item: Base } = $props();

	let user_data: User | undefined = $state();

	async function getUserData(id: string) {
		try {
			user_data = await post('user/info/get', { id });
			console.log(user_data);
		} catch (ex) {
			showMessage(ex, notificationStore, 'Could not get user information');
		}
	}

	$effect(() => {
		user_data = undefined;
		if (item.type == 'user_group') {
			getUserData(item.name);
		} else if (item.type == 'runner') {
			getUserData(item.parent ?? '');
		}
	});
</script>

{#if item.type == 'api'}
	<h3>API</h3>
{:else if item.type == 'runner_group'}
	<h3>Runner Group</h3>
	This reprents a the group of {item.name}.
{:else if item.type == 'user_group'}
	<h3>User</h3>
	{#if user_data}
		All Runners connected to this node bellong to <span class="accent">{user_data.username}</span>
	{:else}
		<div style="text-align: center;">
			<Spinner />
		</div>
	{/if}
{:else if item.type == 'local_runner'}
	<h3>Local Runner</h3>
	This is a local runner
	<div>
		{#if item.task}
			test
		{:else}
			Not running any task
		{/if}
	</div>
{:else if item.type == 'runner'}
	<h3>Runner</h3>
	{#if user_data}
		<p>
			This is a remote runner. This runner is owned by<span class="accent"
				>{user_data?.username}</span
			>
		</p>
		<div>
			{#if item.task}
				This runner is runing a <Tooltip title={item.task.id}>task</Tooltip>
			{:else}
				Not running any task
			{/if}
		</div>
	{:else}
		<div style="text-align: center;">
			<Spinner />
		</div>
	{/if}
{:else}
	{item.type}
{/if}

<style lang="scss">
	h3 {
		text-align: center;
		margin: 0;
	}
	.accent {
		background: #22222222;
		padding: 1px;
		border-radius: 5px;
	}
</style>
