<script lang="ts">
	import { goto } from '$app/navigation';
	import { userStore } from 'src/routes/UserStore.svelte';
	import { onMount } from 'svelte';

	import 'src/styles/forms.css';
	import { post } from 'src/lib/requests.svelte';
	import MessageSimple, { type DisplayFn } from 'src/lib/MessageSimple.svelte';
	import TokenTable from './TokenTable.svelte';
	import DeleteUser from './DeleteUser.svelte';

	onMount(() => {
		if (!userStore.isLogin()) {
			goto('/login');
		}
	});

	let email = $state(userStore.user?.email ?? '');

	let passwordData = $state({
		old_password: '',
		password: '',
		password2: ''
	});

	let submiitedEmail = $state(false);
	let submiitedPassword = $state(false);

	let msgEmail: MessageSimple;
	let msgPassword: MessageSimple;

	async function onSubmitEmail() {
		submiitedEmail = true;
		msgEmail.display('');

		if (!userStore.user) return;

		try {
			let req = await post('user/info', {
				id: userStore.user.id,
				email: email
			});
			userStore.user = {
				...userStore.user,
				...req
			};
			msgEmail.display('User updated successufly!', { type: 'success', timeToShow: 10000 });
		} catch (e) {
			if (e instanceof Response) {
				msgEmail.display(await e.json());
			} else {
				msgEmail.display('Could not update email');
			}
		}
	}

	async function onSubmitPassword() {
		submiitedPassword = true;
		msgPassword.display('');
		if (!userStore.user) return;

		try {
			await post('user/info/password', passwordData);
			passwordData = { old_password: '', password: '', password2: '' };
			msgPassword.display('Password updated successufly!', { type: 'success', timeToShow: 10000 });
		} catch (e) {
			if (e instanceof Response) {
				msgPassword.display(await e.json());
			} else {
				msgPassword.display('Could not update password');
			}
		}
	}
</script>

<svelte:head>
	<title>User Info</title>
</svelte:head>

<div class="login-page">
	<div>
		<h1>User Infomation</h1>
		<form on:submit|preventDefault={onSubmitEmail} class:submiitedEmail>
			<fieldset>
				<label for="email">Email</label>
				<input type="email" required name="email" bind:value={email} />
			</fieldset>
			<MessageSimple bind:this={msgEmail} />
			<button> Update </button>
		</form>
		<form on:submit|preventDefault={onSubmitPassword} class:submiitedPassword>
			<fieldset>
				<label for="old_password">Old Password</label>
				<input
					required
					bind:value={passwordData.old_password}
					name="old_password"
					type="password"
				/>
			</fieldset>
			<fieldset>
				<label for="password">New Password</label>
				<input required bind:value={passwordData.password} name="password" type="password" />
			</fieldset>
			<fieldset>
				<label for="password2">Repeat New Password</label>
				<input required bind:value={passwordData.password2} name="password2" type="password" />
			</fieldset>
			<MessageSimple bind:this={msgPassword} />
			<div>
				<button> Update </button>
			</div>
		</form>
		<TokenTable />
		<DeleteUser />
	</div>
</div>

<style lang="scss">
	/* Login Page */
	.login-page {
		display: grid;
		place-items: center;
		margin-bottom: 40px;
		& > div {
			width: 40vw;
		}
		h1 {
			text-align: center;
		}
	}
</style>
