<script lang="ts">
	import { _ } from 'svelte-i18n';
	import Header from '$lib/components/Header.svelte';
	import LoadingSpinner from '$lib/components/uiElements/LoadingSpinner.svelte';
	import { goto } from '$app/navigation';
	import { base } from '$app/paths';
	let changingPassword = false;
	let passwordChange = {
		currentPassword:"",
		newPassword:"",
		newPassword2:""
	};
	async function fetchUserData(): Promise<any> {
		const token = localStorage.getItem('token');
		const userInfoRequest = new Request(`/api/userInfo.php`, {
			headers: { Authorization: `Bearer ${token}` }
		});
		const result = await fetch(userInfoRequest);
		if (result.status == 401) {
			goto(`${base}/login`);
		}
		if (!result.ok) {
			throw new Error('Unable to fetch User Info');
		}

		const fetchedUserData = (await result.json()).user;
		return fetchedUserData;
	}
</script>

<Header />
<main class="flex items-center justify-center p-4 max-sm:p-0 bg-baby-powder dark:bg-gunmetal max-sm:h-full">
	<figure
		class="w-md rounded-xl sm:bg-gray-950/5 p-1 sm:inset-ring inset-ring-gray-950/5 sm:dark:bg-white/10 sm:dark:inset-ring-white/10 max-sm:w-full max-sm:p-0 max-sm:rounded-none max-sm:h-full"
	>
		<div
			class="not-prose overflow-auto rounded-lg sm:bg-white p-2 sm:outline outline-white/5 sm:dark:bg-gunmetal-900/80 max-sm:rounded-none max-sm:h-full"
		>
			<h1 class="mb-4 text-center text-2xl font-bold dark:text-timberwolf">{$_('profile.title')}</h1>
			{#await fetchUserData()}
				<LoadingSpinner />
			{:then userData}
				<ul class="grid grid-cols-1 space-y-4">
					<li class="mr-auto ml-auto w-xs rounded bg-white dark:bg-gunmetal dark:border dark:text-timberwolf p-4 shadow">
						{$_('profile.user_display_name')}: {userData.userDisplayName}
					</li>
					<li class="mr-auto ml-auto w-xs rounded bg-white dark:bg-gunmetal dark:border dark:text-timberwolf p-4 shadow">
						{$_('profile.user_name')}: {userData.userName}
					</li>
					{#if changingPassword}
						<div class="mr-auto ml-auto w-xs rounded bg-gray-100 p-3">
							<form>
								<label class="block"
									><span
										class="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white"
										>Current Password</span
									><input
										id="currentPassword"
										class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm"
										placeholder="***"
										type="password"
										name="currentPassword"
										bind:value={passwordChange.currentPassword}
									/></label
								>
								<label class="block"
									><span
										class="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white"
										>New Password</span
									><input
										id="newPassword"
										class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm"
										placeholder="***"
										type="password"
										name="newPassword"
										bind:value={passwordChange.newPassword}
									/></label
								>
								<label class="block"
									><span
										class="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white"
										>Repeat new Password</span
									><input
										id="newPassword2"
										class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm"
										placeholder="***"
										type="password"
										name="newPassword2"
										bind:value={passwordChange.newPassword}
									/></label
								>
								<div class="w-full flex space space-x-1 pt-3">
								<button type="button" class="w-1/2 cursor-pointer rounded bg-red-600 p-1 text-center text-white shadow hover:bg-red-400 active:bg-red-800"
								on:click={()=>{changingPassword=false;}}>
									Cancel
								</button>
								<button type="button" class="w-1/2 cursor-pointer rounded bg-blue-600 p-1 text-center text-white shadow hover:bg-blue-400 active:bg-blue-800">
									Save
								</button>
								</div>
							</form>
						</div>
					{:else}
						<button
							class="mr-auto ml-auto w-xs cursor-pointer rounded bg-forest-green-400 hover:bg-forest-green-500  dark:bg-forest-green-600 p-4 text-center text-gunmetal dark:hover:bg-forest-green-700 dark:hover:text-timberwolf shadow disabled:opacity-80"
							on:click={() => {
								changingPassword = true;
							}}
						>
							Edit Password
						</button>
					{/if}
				</ul>
			{:catch exception}
				{exception}
			{/await}
		</div>
	</figure>
</main>
