<script lang="ts">
	// The ordering of these imports is critical to your app working properly
	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
	import '@skeletonlabs/skeleton/styles/all.css';
	// Most of your app wide CSS should be put in this file
	import '../../app.postcss';
	import {
		AppShell,
		Avatar,
		Tab,
		TabGroup,
		modalStore,
		type ModalSettings
	} from '@skeletonlabs/skeleton';
	import { enhance } from '$app/forms';
	import Seo from '$lib/components/SEO.svelte';

	export let data;

	let tabSet: number = 0;

	function modalConfirm(): void {
		const modal: ModalSettings = {
			type: 'confirm',
			title: 'Do you want to logout?',
			body: 'You can do so by confirming this window.',
			response: (r: boolean) => {
				if (r) {
					const logoutForm = document.getElementById('logout-form') as HTMLFormElement;
					logoutForm.submit();
				}
			}
		};
		modalStore.trigger(modal);
	}

	function modalConfirmDeleteUser(): void {
		const modal: ModalSettings = {
			type: 'confirm',
			title: 'Do you want to permanently delete your profile?',
			body: 'You can do so by confirming this window.',
			response: (r: boolean) => {
				if (r) {
					const deleteUserForm = document.getElementById('deleteUser-form') as HTMLFormElement;
					deleteUserForm.submit();
				}
			}
		};
		modalStore.trigger(modal);
	}
</script>

<Seo title="settings" description="users settings" keywords="user settings" type="WebPage" />

<div>
	<AppShell>
		<svelte:fragment slot="pageHeader">
			<TabGroup
				justify="justify-center"
				hover="hover:variant-soft-primary"
				flex="flex-1 lg:flex-none"
			>
				<Tab bind:group={tabSet} name="accout" value={0}>
					my account</Tab
				>
				<Tab bind:group={tabSet} name="logout" value={1}>
					delete account</Tab
				>
				<Tab bind:group={tabSet} name="delete-acc" value={2}>
					sign out</Tab
				>
				<!-- Tab Panels --->
				<svelte:fragment slot="panel">
					<!-- user info -->
					{#if tabSet === 0}
						<div class="flex justify-start items-start">
							<div class="ml-12 mt-8">
								<div class="flex items-center space-x-4">
									<div class="flex-shrink-0">
										<Avatar initials={data.user.username.charAt(0)} width="w-12" height="h-12" />
									</div>
									<div class="space-y-1">
										<h3 class="text-lg font-bold">{data.user.username}</h3>
										<p class="text-gray-500">Additional details or description about the user.</p>
									</div>
								</div>
							</div>
						</div>

						<!--DELETE USER -->
					{:else if tabSet === 1}
						<div class="flex justify-start items-start">
							<div class="ml-12 mt-8">
								<h3 class="inline-flex">Do you want to delete your profile?</h3>
								<button
									class="bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded mt-4 ml-2"
									on:click={modalConfirmDeleteUser}
								>
									<form use:enhance action="?/deleteUser" method="POST" id="deleteUser-form">
										Delete my profile
									</form>
								</button>
								<p class="text-gray-500 mt-2">
									This will premanently delete your profile and it's data.
								</p>
							</div>
						</div>

						<!-- Sign OUT -->
					{:else if tabSet === 2}
						<div class="flex justify-start items-start">
							<div class="ml-12 mt-8">
								<h3 class="inline-flex">Do you want to Sign out?</h3>
								<button
									class="bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded mt-4 ml-2"
									on:click={modalConfirm}
								>
									<form use:enhance action="?/signOut" method="POST" id="logout-form">
										Sign out
									</form>
								</button>
								<p class="text-gray-500 mt-2">
									After signing out we delete auth cookies, don't worry. :)
								</p>
							</div>
						</div>
					{/if}
				</svelte:fragment>
			</TabGroup>
		</svelte:fragment>
	</AppShell>
</div>