<script>
	import Modal from '$lib/components/Modal.svelte';
	import UserEditForm from '$lib/components/UserEditForm.svelte';
	import { onMount } from 'svelte';
	import { page } from '$app/stores';
	import { t } from 'svelte-i18n';

	/** @type {import('./$types').ActionData} */
	export let form;

	$: ({ user, licence_categories, subscriptions } = $page.data);

	let showModal = false;

	const open = () => (showModal = true);
	const close = () => {
		showModal = false;
		if (form) {
			form.errors = undefined;
		}
	};

	onMount(() => {
		console.dir(user);
	});
</script>

<div class="hero-container">
	<div class="user-info">
		{#if user.status}
			<h3 class="hero-subtitle subtitle info-row">
				<span class="label">Status:</span>
				<span class="value block-value">
					<span
						>{$t(`userStatus.${user.status}`, {
							default: 'unknown status'
						})}</span
					>
					<span>{$t(`userRole.${user.role_id}`, { default: 'unknown role' })}</span>
				</span>
			</h3>
		{/if}
		<h3 class="hero-subtitle subtitle info-row">
			<span class="label">Name:</span>
			<span class="value">{`${user.first_name} ${user.last_name}`}</span>
		</h3>
		{#if user.email}
			<h3 class="hero-subtitle subtitle info-row">
				<span class="label">Email:</span>
				<span class="value">{user.email}</span>
			</h3>
		{/if}
		{#if user.address}
			<h3 class="hero-subtitle subtitle info-row">
				<span class="label">Adresse:</span>
				<span class="value block-value">
					<span>{user.address}</span>
					<span>{`${user.zip_code} ${user.city}`}</span>
				</span>
			</h3>
		{/if}
		{#if user.phone}
			<h3 class="hero-subtitle subtitle info-row">
				<span class="label">Telefon:</span>
				<span class="value">{user.phone}</span>
			</h3>
		{/if}
		{#if user.dateofbirth}
			<h3 class="hero-subtitle subtitle info-row">
				<span class="label">Geburtstag:</span>
				<span class="value">{user.dateofbirth}</span>
			</h3>
		{/if}
		{#if user.notes}
			<h3 class="hero-subtitle subtitle info-row">
				<span class="label">{$t('notes')}:</span>
				<span class="value">{user.notes}</span>
			</h3>
		{/if}
	</div>

	<div class="hero-buttons-container">
		<button class="button-dark" on:click={open}>Ändern</button>
	</div>
</div>

{#if showModal}
	<Modal on:close={close}>
		<UserEditForm
			{form}
			{user}
			{subscriptions}
			{licence_categories}
			on:close={close}
			on:cancel={close}
		/>
	</Modal>
{/if}

<style>
	.hero-container .hero-subtitle:not(:last-of-type) {
		margin: 0 0 0 0;
	}

	.hero-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-info {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.5rem 1rem;
		align-items: start;
		text-align: left;
		margin-top: 1rem;
		color: var(--text);
		background-color: var(--surface0);
		padding: 1.5rem;
		border-radius: 8px;
		border: 1px solid var(--surface1);
	}

	.info-row {
		display: contents;
	}

	.label {
		font-size: 1.3rem;
		font-weight: bold;
		text-align: left;
		padding-right: 1rem;
		color: var(--lavender);
	}

	.value {
		margin: 0;
		font-size: 1.2rem;
		text-align: left;
		color: var(--text);
	}

	.block-value {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		color: var(--subtext0);
	}

	.hero-buttons-container {
		margin-top: 1rem;
	}

	.user-info {
		font-size: 1rem;
	}

	.label,
	.value {
		font-size: 1.1rem;
	}
</style>
