<script>
	import { _ } from "svelte-i18n";
	import store from "../../store";
	import isEmail from "validator/es/lib/isEmail";
	import { UserService, UserGroupService } from "@odit/lfk-client-js";
	import PromiseError from "../base/PromiseError.svelte";
	import toast from "svelte-french-toast";
	export let params;
	const user_promise = UserService.userControllerGetOne(params.userid);
	let data_loaded = false;
	let usergroups_array_original = [];
	const colors = [
		"#f3558e",
		"#17b978",
		"#3498db",
		"#3f3b3b",
		"#775ada",
		"#7ed6df_#000000",
		"#000000",
		"#21e6c1_#000000",
		"#c0392b",
		"#d35400",
		"#7f8c8d",
		"#6ab04c",
		"#4834d4",
		"#ff1f5a",
		"#eac100",
	];
	let matched_colors = [];
	$: delete_triggered = false;
	$: original_data = {};
	$: editable_userdata = {};
	$: allgroups = [];
	$: allgroups_ids = [];
	$: usergroups_array = [];
	$: search_permission = "";
	user_promise.then((data) => {
		let current_target = "";
		let colorindex = -1;
		// alphabetically sort permissions for color compatibility for target
		data.permissions = data.permissions.sort();
		data.permissions.forEach((p) => {
			const target = p.split(":")[0];
			if (current_target !== p.split(":")[0]) {
				colorindex++;
				current_target = p.split(":")[0];
			}
			let background = colors[colorindex];
			let foreground = "#fff";
			if (background.includes("_")) {
				foreground = background.split("_")[1];
				background = background.split("_")[0];
			}
			matched_colors[target] = [background, foreground];
		});
		//
		data_loaded = true;
		original_data = Object.assign(original_data, data);
		editable_userdata = data;
		data.groups.forEach((g) => {
			usergroups_array = usergroups_array.concat([g.id]);
		});
		usergroups_array_original = usergroups_array;
		allgroups.forEach((g) => {
			allgroups_ids.push(g.id);
		});
	});
	UserGroupService.userGroupControllerGetAll().then((data) => {
		allgroups = data;
	});
	$: changes_performed = !(
		JSON.stringify(original_data) == JSON.stringify(editable_userdata)
	);
	$: groups_changed =
		JSON.stringify(usergroups_array) ===
		JSON.stringify(usergroups_array_original);
	$: save_enabled =
		(changes_performed || !groups_changed) && isEmail(editable_userdata.email);
	function submit() {
		if (data_loaded === true && save_enabled) {
			editable_userdata.groups = usergroups_array;
			toast.loading($_("updating-user"));
			UserService.userControllerPut(original_data.id, editable_userdata)
				.then((resp) => {
					Object.assign(original_data, resp);
					Object.assign(editable_userdata, resp);
					original_data.permissions = resp.permissions;
					usergroups_array = [];
					resp.groups.forEach((g) => {
						usergroups_array = usergroups_array.concat([g.id]);
					});
					usergroups_array_original = usergroups_array;
					//
					toast.dismiss();
					toast.success($_("user-updated"));
				})
				.catch((err) => {});
		}
	}
	function deleteUser() {
		UserService.userControllerRemove(original_data.id, true)
			.then((resp) => {
				location.replace("./");
			})
			.catch((err) => {});
	}
</script>

{#await user_promise}
	<!--  -->
{:then user}
	<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
								>
								{$_("users")}</a
							>
						</li>
					</ol>
				</nav>
			</div>
		</div>
		<div class="mb-4 text-3xl font-extrabold">
			{original_data.firstname}
			{original_data.lastname}
			<span data-id="user_actions_${editable_userdata.id}">
				{#if store.state.jwtinfo.userdetails.permissions.includes("USER:DELETE")}
					{#if delete_triggered}
						<button
							on:click={deleteUser}
							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-delete")}</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-user")}</button
						>
					{/if}
				{/if}
				{#if !delete_triggered}
					<button
						disabled={!save_enabled}
						class:opacity-50={!save_enabled}
						type="button"
						on:click={submit}
						class="w-full 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 mb-1 lg:mb-0"
						>{$_("save-changes")}</button
					>
				{/if}
			</span>
		</div>
		<div class="mt-3 text-sm w-full">
			<label for="enabled" class="font-semibold text-gray-700"
				>{$_("active")}?</label
			>
			<br />
			<p class="text-gray-500">
				<input
					id="enabled"
					on:change={() => {
						editable_userdata.enabled = !editable_userdata.enabled;
					}}
					name="enabled"
					type="checkbox"
					checked={editable_userdata.enabled}
					class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
				/>
				{$_("set-the-user-active-inactive")}
			</p>
		</div>
		<div class="text-sm w-full mt-2">
			<label for="firstname" class="font-semibold text-gray-700"
				>{$_("first-name")}</label
			>
			<input
				autocomplete="off"
				placeholder={$_("first-name")}
				type="text"
				bind:value={editable_userdata.firstname}
				name="firstname"
				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"
			/>
		</div>
		<!-- <div class="text-sm w-full mt-2">
      <label for="middlename" class="font-semibold text-gray-700"
        >{$_("middle-name")}</label
      >
      <input
        autocomplete="off"
        placeholder={$_("middle-name")}
        type="text"
        bind:value={editable_userdata.middlename}
        name="middlename"
        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"
      />
    </div> -->
		<div class="text-sm w-full mt-2">
			<label for="lastname" class="font-semibold text-gray-700"
				>{$_("last-name")}</label
			>
			<input
				autocomplete="off"
				placeholder={$_("last-name")}
				type="text"
				bind:value={editable_userdata.lastname}
				name="lastname"
				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"
			/>
		</div>
		<div class="text-sm w-full mt-2">
			<label for="email" class="font-semibold text-gray-700"
				>{$_("e-mail-adress")}</label
			>
			<input
				autocomplete="off"
				placeholder={$_("e-mail-adress")}
				type="email"
				bind:value={editable_userdata.email}
				name="email"
				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"
			/>
		</div>
		{#if !isEmail(editable_userdata.email)}
			<span
				class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
				>{$_("valid-email-is-required")}</span
			>
		{/if}
		<div class="text-sm w-full mt-2">
			<label for="username" class="font-semibold text-gray-700"
				>{$_("username")}</label
			>
			<input
				autocomplete="off"
				placeholder={$_("username")}
				type="text"
				bind:value={editable_userdata.username}
				name="username"
				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"
			/>
		</div>
		<div class="text-sm w-full mt-2">
			<span class="font-semibold">{$_("groups")}</span>
			<!-- svelte-ignore a11y-no-onchange -->
			<select
				bind:value={usergroups_array}
				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"
				multiple
			>
				{#each allgroups as g}
					{#if usergroups_array.includes(g.id)}
						<option selected value={g.id}>{g.name}</option>
					{:else}
						<option value={g.id}>{g.name}</option>
					{/if}
				{/each}
			</select>
		</div>
		<div class="text-sm w-full mt-8">
			<p class="font-medium mb-4">
				{$_("permissions")}
				<a
					class="px-4 py-2 bg-gray-500 rounded-md text-white"
					href="/users/{params.userid}/permissions/">{$_("edit-permissions")}</a
				>
			</p>
			<div class="w-full sm:my-px sm:px-px sm:w-1/2">
				<input
					autocomplete="off"
					placeholder={$_("search-for-permission")}
					type="text"
					bind:value={search_permission}
					class="mt-4 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"
				/>
			</div>
			{#each original_data.permissions as p}
				{#if p.toLowerCase().includes(search_permission.toLowerCase())}
					<span
						style="background:{matched_colors[
							p.split(':')[0]
						][0]};color:{matched_colors[p.split(':')[0]][1]};"
						class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
						>{p}</span
					>
					<!--  -->
				{/if}
			{/each}
		</div>
	</section>
{:catch error}
	<PromiseError {error} />
{/await}
