<script>
	import { _ } from "svelte-i18n";
	import store from "../../store";
	import { ScanStationService } from "@odit/lfk-client-js";
	import AddScanStationModal from "./AddScanStationModal.svelte";
	import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
	import ScanStationsEmptyState from "./ScanStationsEmptyState.svelte";
	import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
	import toast from "svelte-french-toast";
	//
	export let modal_open = false;
	export let copy_modal_open = false;
	export let new_station = {};
	//
	const promise = ScanStationService.scanStationControllerGetAll().then(
		(result) => {
			current_stations = result;
		}
	);
	$: searchvalue = "";
	$: active_deletes = [];
	let delete_station = {};
	let current_stations = [];
</script>

<section class="container p-5">
	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
		{$_("scanstations")}
	</h4>
	{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
		<button
			on:click={() => {
				modal_open = true;
			}}
			type="button"
			class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
		>
			{$_("create-a-new-scanstation")}
		</button>
	{/if}
	<ConfirmScanStationDeletion
		on:cancelDelete={(event) => {
			modal_open = false;
			active_deletes[event.detail.id] = false;
		}}
		bind:modal_open
		bind:delete_station
	/>
	{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
		{#await promise}
			<div
				class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
				role="alert"
			>
				<p class="font-bold">{$_("scanstations-are-being-loaded")}</p>
				<p class="text-sm">{$_("this-might-take-a-moment")}</p>
			</div>
		{:then}
			{#if current_stations.length === 0}
				<ScanStationsEmptyState />
			{:else}
				<input
					type="search"
					bind:value={searchvalue}
					placeholder={$_("datatable.search")}
					aria-label={$_("datatable.search")}
					class="mb-2 w-full sm:w-auto mt-1 sm:mt-0 p-2 rounded-md border"
				/>
				<div
					class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
				>
					<table class="divide-y divide-gray-200 w-full">
						<thead class="bg-gray-50">
							<tr class="odd:bg-white even:bg-gray-100">
								<th
									scope="col"
									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
								>
									{$_("track")}
								</th>
								<th
									scope="col"
									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
								>
									{$_("description")}
								</th>
								<th
									scope="col"
									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
								>
									{$_("status")}
								</th>
								<th scope="col" class="relative px-6 py-3">
									<span class="sr-only">{$_("action")}</span>
								</th>
							</tr>
						</thead>
						<tbody class="divide-y divide-gray-200">
							{#each current_stations as s}
								{#if Object.values(s)
									.toString()
									.toLowerCase()
									.includes(searchvalue)}
									<tr
										class="odd:bg-white even:bg-gray-100"
										data-rowid="station_{s.id}"
									>
										<td class="px-6 py-4 whitespace-nowrap">
											<div class="flex items-center">
												<div class="ml-4">
													<div class="text-sm font-medium text-gray-900">
														<a
															href="../tracks"
															class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
														>
															{s.track.name || s.track.distance + "m"}</a
														>
													</div>
												</div>
											</div>
										</td>
										<td class="px-6 py-4 whitespace-nowrap">
											<div class="flex items-center">
												<div class="ml-4">
													<div class="text-sm font-medium text-gray-900">
														{s.description}
													</div>
												</div>
											</div>
										</td>
										<td class="px-6 py-4 whitespace-nowrap">
											<div class="flex items-center">
												{#if s.enabled}
													<span
														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
														>{$_("active")}</span
													>
												{:else}
													<span
														class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
														>{$_("inactive")}</span
													>
												{/if}
											</div>
										</td>
										{#if active_deletes[s.id] === true}
											<td
												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
											>
												<button
													on:click={() => {
														active_deletes[s.id] = false;
													}}
													tabindex="0"
													class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
													>{$_("cancel-delete")}</button
												>
												<button
													on:click={() => {
														ScanStationService.scanStationControllerRemove(
															s.id,
															false
														)
															.then((resp) => {
																current_stations = current_stations.filter(
																	(obj) => obj.id !== s.id
																);
																toast($_("station-deleted"));
															})
															.catch((err) => {
																modal_open = true;
																delete_station = s;
															});
													}}
													tabindex="0"
													class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
													>{$_("confirm-delete")}</button
												>
											</td>
										{:else}
											<td
												class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
											>
												<a
													href="/scanstations/{s.id}"
													class="text-indigo-600 hover:text-indigo-900"
													>{$_("details")}</a
												>
												{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
													<button
														on:click={() => {
															active_deletes[s.id] = true;
														}}
														tabindex="0"
														class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
														>{$_("delete")}</button
													>
												{/if}
											</td>
										{/if}
									</tr>
								{/if}
							{/each}
						</tbody>
					</table>
				</div>
			{/if}
		{:catch error}
			<div
				class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
			>
				<span class="inline-block align-middle mr-8">
					<b class="capitalize">{$_("general_promise_error")}</b>
					{error}
				</span>
			</div>
		{/await}
	{/if}
</section>

{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
	<AddScanStationModal
		bind:modal_open
		bind:current_stations
		bind:new_station
		bind:copy_modal_open
	/>
	<CopyScanStationTokenModal bind:copy_modal_open bind:new_station />
{/if}
