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

	$: urls = [];
	let urlQuery;

	// 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) {
			urlQuery = Apiclient.getUrls().then((res) => {
				urls = res;
			});
		}
	});

	onDestroy(unsubscribe);

	function deleteUrl(shortcode) {
		Apiclient.deleteUrl(shortcode).then(() => {
			urls = urls.filter((url) => url.shortcode != shortcode);
		});
	}
</script>

<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Manage all links</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">
					Target
				</th>
				<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
					Visits
				</th>
				<th scope="col" class="relative px-6 py-3">
					<span class="sr-only">Edit</span>
				</th>
			</tr>
		</thead>
		<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:text-gray-100" x-max="1">
			{#await urlQuery}
				<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">
						<p href="#">Loading data...</p>
					</td>
					<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
					<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
						<button
							class="text-indigo-600 dark:text-red-600 hover:text-indigo-900 dark:hover:text-red-900"
							>Delete</button
						>
					</td>
				</tr>
			{:then}
				{#each urls as url}
					<tr>
						<td
							class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
						>
							{url.shortcode}
						</td>
						<td class="px-6 py-4 whitespace-nowrap text-sm">
							<a href={url.target}>{url.target}</a>
						</td>
						<td class="px-6 py-4 whitespace-nowrap text-sm"> {url.visits} </td>
						<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
							<button
								on:click={deleteUrl(url.shortcode)}
								class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:bg-red-700"
							>
								Delete
							</button>
							<a
								href={`./details?shortcode=${url.shortcode}`}
								class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:bg-blue-700"
							>
								Details
							</a>
						</td>
					</tr>
				{/each}
			{/await}
		</tbody>
	</table>
</div>
