---
import type { CollectionEntry } from "astro:content";
import { render } from "astro:content";
import { getImage } from "astro:assets";

import BaseLayout from "./Base.astro";
import BlogHero from "@/components/blog/Hero.astro";

interface Props {
	post: CollectionEntry<"post">;
}

const { post } = Astro.props;
const {
	data: { title, description, ogImage, publishDate, atUri },
} = post;

let socialImage: string;
if (!ogImage) {
	socialImage = "/social-card.png";
} else if (typeof ogImage === "string") {
	socialImage = ogImage;
} else {
	const optimized = await getImage({
		src: ogImage,
		format: "png",
		width: 1200,
	});
	socialImage = optimized.src;
}
const articleDate = publishDate.toISOString();
const { headings } = await render(post);
---

<script>
	const scrollBtn = document.getElementById("to-top-btn") as HTMLButtonElement;
	const targetHeader = document.getElementById("blog-hero") as HTMLDivElement;

	function callback(entries: IntersectionObserverEntry[]) {
		entries.forEach((entry) => {
			// only show the scroll to top button when the heading is out of view
			scrollBtn.dataset.show = (!entry.isIntersecting).toString();
		});
	}

	scrollBtn.addEventListener("click", () => {
		document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
	});

	const observer = new IntersectionObserver(callback);
	observer.observe(targetHeader);
</script>

<BaseLayout meta={{ title, description, articleDate, ogImage: socialImage, atUri }}>
	<div class="gap-x-10 lg:flex lg:items-start">
		{
			!!headings.length && (
				<aside class="sticky top-20 order-2 -mr-32 hidden basis-64 lg:block">
					<h2 class="font-semibold">Table of Contents</h2>
					<ul class="mt-4 text-xs">
						{headings.map(({ depth, slug, text }) => (
							<li class="line-clamp-2 hover:text-accent">
								<a
									class={`block ${depth <= 2 ? "mt-3" : "mt-2 pl-3 text-[0.6875rem]"}`}
									href={`#${slug}`}
									aria-label={`Scroll to section: ${text}`}
								>
									<span>{"#".repeat(depth)}</span> {text}
								</a>
							</li>
						))}
					</ul>
				</aside>
			)
		}
		<article class="flex-grow break-words">
			<div id="blog-hero"><BlogHero content={post} /></div>
			<div
				class="prose prose-sm prose-cactus mt-12 prose-headings:font-semibold prose-headings:before:absolute prose-headings:before:-ml-4 prose-headings:before:text-accent prose-headings:before:content-['#'] prose-th:before:content-none"
			>
				<slot />
			</div>
		</article>
	</div>
	<button
		id="to-top-btn"
		class="z-90 fixed bottom-8 right-4 flex h-10 w-10 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-zinc-900 text-3xl opacity-0 transition-all duration-300 hover:border-zinc-400 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 dark:bg-zinc-700 sm:right-8 sm:h-12 sm:w-12"
		aria-label="Back to Top"
		data-show="false"
		><svg
			xmlns="http://www.w3.org/2000/svg"
			aria-hidden="true"
			focusable="false"
			fill="none"
			viewBox="0 0 24 24"
			stroke-width="2"
			stroke="currentColor"
			class="h-6 w-6"
		>
			<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
		</svg>
	</button>
</BaseLayout>