<script>
	import Apiclient from '$lib/Apiclient';
	import UserStore from '$lib/UserStore';
	import { onDestroy } from 'svelte';

	$: visits = [];
	let visitQuery;

	// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
	const unsubscribe = UserStore.subscribe((value) => {
		if (value.isLoggedIn) {
			visitQuery = Apiclient.getVisits().then((res) => {
				visits = res;
				unsubscribe();
			});
		}
	});
</script>

<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">View all visits</h2>
<div class="rounded-xl">
	<table class="min-w-full divide-y divide-gray-200">
		<thead class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
			<tr>
				<th scope="col" class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">
					Shortcode
				</th>
				<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
					Provider
				</th>
				<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
					Timestamp
				</th>
			</tr>
		</thead>
		<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:text-gray-100" x-max="1">
			{#await visitQuery}
				<tr>
					<td
						class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
					>
						Loading data...
					</td>
					<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
					<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
				</tr>
			{:then}
				{#each visits as visit}
					<tr>
						<td
							class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
						>
                            {#if visit.provider == "native"}
							<a href={`./details?shortcode=${visit.shortcode}`}>{visit.shortcode}</a>
                            {:else}
                                {visit.shortcode}
                            {/if}
						</td>
						<td class="px-6 py-4 whitespace-nowrap text-sm">
							{visit.provider}
						</td>
						<td class="px-6 py-4 whitespace-nowrap text-sm"> {visit.timestamp} </td>
					</tr>
				{/each}
			{/await}
		</tbody>
	</table>
</div>
