<script>
	import { page } from '$app/state';
	let blogTitle = $derived(page.params.slug);

	$inspect(page.params.slug);

	let blogPromise = $state(null);
	$inspect(blogPromise);

	// $effect(async () => {
	// 	try {
	// 		const res = await fetch(
	// 			`https://darkicewolf50cloud.bajacloud.duckdns.org/blogs/blog/${blogTitle}`
	// 		);
	// 		if (!res.ok) {
	// 			blogPromise = null;
	// 			return;
	// 		}
	// 		const data = await res.json();
	// 		blogPromise = data;
	// 	} catch (e) {
	// 		console.error('Fetch error:', e);
	// 		blogPromise = null;
	// 	}
	// });
	$effect(() => {
		if (!blogTitle) {
			blogPromise = null;
			return;
		}
		blogPromise = fetch(
			`https://darkicewolf50cloud.bajacloud.duckdns.org/blogs/blog/${blogTitle}`
		).then((res) => {
			if (!res.ok) throw new Error('Network error');
			return res.json();
		});
	});
</script>

<title>Brock Tomlinson - {blogTitle}</title>
<meta name="author" content="Brock Tomlinson" />
<meta name="robots" content="noindex, nofollow" />

<div id="blog">
	<a href="/blogs/0">Go Back</a>
	{#await blogPromise}
		<p>Loading...</p>
	{:then blogContent}
		{#if blogContent}
			<article>
				<header class="blog-info">
					<h1>{blogContent.blog_title}</h1>
					<div>
						<ul>
							{#each blogContent.tags as tag, tagIndex}
								<li key={tag + tagIndex}>{tag}</li>
							{/each}
						</ul>
						<p>{blogContent.date_last_edit}</p>
					</div>
				</header>
				<section class="blog-content">{@html blogContent.html_blog_content}</section>
			</article>
		{:else}
			<p>An Error has occurred or blog not found</p>
		{/if}
	{:catch}
		<p>An Error has occurred</p>
	{/await}
</div>

<style>
	#blog {
		margin-top: 2svh;
		min-height: 80svh;
	}

	.blog-info {
		display: flex;
		flex-direction: column;
	}

	ul {
		display: flex;
		flex-direction: row;
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	ul li {
		background-color: rgba(128, 0, 128, 0.2);
		border-radius: 1rem;
		padding: 0.25svh 8px;
		margin: 0svh 0.25svh;
		height: fit-content;
	}

	.blog-info h1 {
		padding: 1svh 1svw !important;
		margin: 2svh 0svw !important;
		margin-bottom: 0px !important;
		font-size: 2em !important;
		border-radius: 0px !important;
		border-bottom: none !important;
	}

	.blog-info div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 1svh 0svw;
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
	}

	#blog a {
		color: #ffffff;
		margin-top: 50px;
		text-decoration: underline;
	}

	#blog a:hover {
		color: #91a4d2;
	}

	.blog-content {
		padding: 2svh 0svw;
	}
	:global(.blog-content h1),
	:global(.blog-content h2),
	:global(.blog-content h3),
	:global(.blog-content h4),
	:global(.blog-content h5),
	:global(.blog-content h6) {
		margin: 0px;
		padding: 1svh 0svw;
		border-radius: 0px;
		border-bottom: none;
	}

	h1 {
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		margin: 1svh 2svw;
		padding: 1svh 2svw;
		display: flex;
	}

	p {
		margin: 0px;
		padding: 0px;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	a:hover {
		color: #91a4d2;
	}
</style>
