<script>
	import { _ } from "svelte-i18n";
	import store from "../../store";
	import PromiseError from "../base/PromiseError.svelte";
	import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
	import { StatsClientService } from "@odit/lfk-client-js";
	import toast from "svelte-french-toast";
	let data_loaded = false;
	let modal_open;
	let delete_client;
	export let params;
	$: delete_triggered = false;
	$: original_data = {};
	const promise = StatsClientService.statsClientControllerGetOne(
		params.clientid
	).then((data) => {
		data_loaded = true;
		original_data = Object.assign(original_data, data);
	});
	function deleteClient() {
		StatsClientService.statsClientControllerRemove(original_data.id, false)
			.then((resp) => {
				toast($_("statsclient-deleted"));
				location.replace("./");
			})
			.catch((err) => {
				modal_open = true;
				delete_client = original_data;
			});
	}
</script>

<ConfirmStatsClientDeletion bind:modal_open bind:delete_client />
{#await promise}
	{$_("loading-statsclient-details")}
{:then}
	<section class="container p-5 select-none">
		<div class="flex flex-row mb-4">
			<div class="w-full">
				<nav class="w-full flex">
					<ol class="list-none flex flex-row items-center justify-start">
						<li class="flex items-center">
							<a class="mr-2" href="./"
								><svg
									xmlns="http://www.w3.org/2000/svg"
									width="24"
									height="24"
									viewBox="0 0 24 24"
									fill="none"
									stroke="currentColor"
									stroke-width="2"
									stroke-linecap="round"
									stroke-linejoin="round"
									class="inline-block"
									><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
								>
								{$_("statsclients")}</a
							>
						</li>
					</ol>
				</nav>
			</div>
		</div>
		<div class="mb-4 text-3xl font-extrabold leading-tight">
			{$_("statsclient")} #{original_data.id}
			<div data-id="stations_actions_${original_data.id}">
				{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:DELETE")}
					{#if delete_triggered}
						<button
							on:click={deleteClient}
							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
							>{$_("confirm-deletion")}</button
						>
						<button
							on:click={() => {
								delete_triggered = !delete_triggered;
							}}
							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
							>{$_("cancel")}</button
						>
					{/if}
					{#if !delete_triggered}
						<button
							on:click={() => {
								delete_triggered = true;
							}}
							type="button"
							class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
							>{$_("delete-statsclient")}</button
						>
					{/if}
				{/if}
			</div>
		</div>
		<!--  -->
		<div class="text-sm w-full mt-2">
			<label for="description" class="font-semibold text-gray-700"
				>{$_("description")}</label
			>
			<p
				name="description"
				class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
			>
				{original_data.description}
			</p>
		</div>
	</section>
{:catch error}
	<PromiseError {error} />
{/await}
