<script lang="ts">
	import { enhance } from '$app/forms';
	import Seo from '$lib/components/SEO.svelte';
	import { Avatar, modalStore, type ModalSettings } from '@skeletonlabs/skeleton';

	export let data;
	export let form;
	$: ({ posts } = data);

	function modalConfirmParam(post: any) {
		return () => {
			const modal: ModalSettings = {
				type: 'confirm',
				title: 'Do you want to delete this post?',
				body: 'You can do so by confirming this window.',
				response: (r: boolean) => {
					if (r) {
						const deleteForm = document.getElementById('delete-form') as HTMLFormElement;
						(deleteForm.elements.namedItem('postid') as HTMLInputElement).value = post.id;
						(deleteForm.elements.namedItem('post_author') as HTMLTextAreaElement).value =
							post.author_id;

						deleteForm.submit();
					}
				}
			};
			modalStore.trigger(modal);
		};
	}

	function scrollToCreatePost() {
		const elementToScroll: any = document.getElementById('createPostForm');
		elementToScroll.scrollIntoView({ behavior: 'smooth' });
	}
</script>

<div class="flex justify-center flex-col items-center relative">
	<!-- CREATE NEW POST-->
	{#if data.user}
		<div class="card max-w-3xl mb-4 w-full" style="max-width: 600px; height: auto;">
			<div class="card-container">
				<div class="card-content p-4 space-y-4" id="createPostForm">
					<h3 class="h3" data-toc-ignore style="overflow-wrap: break-word;">Create new post</h3>
					<form
						action="?/createPost"
						method="POST"
						class=" border border-surface-500 p-4 space-y-4 rounded-container-token"
						use:enhance
					>
						<label class="label" for="title">
							<input
								class="input"
								type="text"
								id="title"
								name="title"
								placeholder="What's the title?"
							/>
						</label>
						{#if form?.errors?.title}
							<p class="text-error-500">{form.errors.title[0]}</p>
						{/if}

						<label class="label" for="content">
							<textarea
								class="input"
								id="content"
								name="content"
								placeholder="say whatever you want"
							/>
						</label>
						{#if form?.errors?.content}
							<p class="text-error-500">{form.errors.content[0]}</p>
						{/if}

						<hr class="card-divider" style="opacity: 0.8;" />

						<div class="flex-auto flex justify-end">
							<button type="submit" class="btn variant-filled">create</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	{/if}
	<!-- POSTS -->
	{#each posts as post}
		<div class="card card-hover max-w-3xl mb-4 w-full" style="max-width: 600px; height: auto;">
			<div class="card-container">
				<div class="card-content p-4 space-y-4">
					<h3 class="h3" data-toc-ignore style="overflow-wrap: break-word;">{post.title}</h3>
					<article>
						<p style="overflow-wrap: break-word;">
							{post.content}
						</p>
					</article>
				</div>
				<hr class="card-divider" style="opacity: 0.5;" />
				<footer class="p-4 flex justify-start items-center space-x-4">
					<Avatar initials={post.author_username.charAt(0)} width="w-8" />
					<div class="flex-auto flex justify-between items-center">
						<h6 class="font-bold">
							By <a href="/profile/{post.author_username}">{post.author_username}</a>
						</h6>
						<small>On {post.created_at.toLocaleDateString()}</small>
					</div>
					{#if data.user}
						{#if data.user.userId == post.author_id}
							<button type="button" class="btn variant-filled" on:click={modalConfirmParam(post)}
								>delete
								<form
									action="?/deletePost"
									method="POST"
									id="delete-form"
									style="display: none;"
									use:enhance
								>
									<input type="text" id="postid" name="postid" />
									<input type="text" id="post_author" name="post_author" />
								</form>
							</button>
						{/if}
					{/if}
				</footer>
			</div>
		</div>
	{/each}
</div>

{#if data.user}
	<button
		type="button"
		class="btn variant-filled fixed bottom-4 right-6"
		on:click={scrollToCreatePost}>create post</button
	>
{:else}
	<a href="/login" class="btn variant-filled fixed bottom-4 right-6">create post</a>
{/if}

<Seo
	title="Home | Sveltekit"
	description="Create or delete posts in sveltekit web app"
	keywords="create post posts blog read"
	type="BlogPosting"
/>
