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

	let shortcode = $page.query.get('shortcode');

	$: urlDetails = {
		shortcode: 'Loading...',
		url: 'Loading...',
		target: 'Loading...',
		visits: 'Loading...'
	};
	$: urlVisists = [];
	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) {
			Apiclient.getUrlDetails(shortcode).then((res) => {
				urlDetails = res;
			});
			visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
				urlVisists = res;
			});
		}
	});

	onDestroy(unsubscribe);
</script>

<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Details: {shortcode}</h2>

<div class="text-gray-800 dark:text-gray-100">
	<span>Shortcode:</span>
	{urlDetails.shortcode} <br />
	<span>URL:</span>
	{urlDetails.url} <br />
	<span>Target:</span>
	{urlDetails.target} <br />
	<span>Visits:</span>
	{urlDetails.visits}
</div>

<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">
					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>
				</tr>
			{:then}
				{#each urlVisists as visit}
					<tr>
						<td
							class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
						>
							{visit.timestamp}
						</td>
					</tr>
				{/each}
			{/await}
		</tbody>
	</table>
</div>
