---
import { render } from "astro:content";

import Masthead from "@/components/blog/Masthead.astro";
import TOC from "@/components/blog/TOC.astro";
import WebMentions from "@/components/blog/webmentions/index.astro";
import GiscusComment from "@/components/componentsBefore/GiscusComment";
import BaseLayout from "./Base.astro";
import ArticleContainer from "@/components/ArticleContainer.astro";
import ShareButtons from "@/components/ShareButtons.astro";
import ContentFooter from "@/components/ContentFooter.astro";
import type { PostItem } from "@/types";

interface Props {
	post: PostItem;
}

const { post } = Astro.props;
const { banner: ogImage, title, description, tags, category } = post.data;
const socialImage = ogImage ?? `/og-image/${post.id}.png`;
const articleDate = post.dateToCmp.toISOString();
const { headings, remarkPluginFrontmatter } = await render(post);
const readingTime: string = remarkPluginFrontmatter.readingTime;
---

<BaseLayout
	meta={{
		articleDate,
		description: description ?? "",
		ogImage: socialImage,
		title,
		tags: [category, ...tags].join(", "),
	}}
>
	<div class="hidden w-full flex-col gap-10 lg:flex lg:flex-row lg:items-start">
		{!!headings.length && <TOC headings={headings} classname="lg:w-64 lg:flex-shrink-0" />}

		<ArticleContainer className="grow break-words" dataPagefindBody={true}>
			<div id="blog-hero" class="mb-12">
				<Masthead content={post} readingTime={readingTime} ogImage={socialImage} />
			</div>
			<div class="flex flex-col gap-10 lg:flex-row lg:items-start">
				<div
					class="prose prose-base prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-headings:before:content-['#'] sm:prose-th:before:content-none w-full lg:!max-w-none"
				>
					<slot />
					<WebMentions />
					<ContentFooter />
					<GiscusComment client:load />
					<div class="mt-8 border-t pt-4">
						<ShareButtons />
					</div>
				</div>
			</div>
		</ArticleContainer>
	</div>

	<ArticleContainer className="grow break-words lg:hidden" dataPagefindBody={true}>
		<div id="blog-hero" class="mb-12">
			<Masthead content={post} readingTime={readingTime} ogImage={socialImage} />
		</div>
		<div class="flex flex-col gap-10 lg:flex-row lg:items-start">
			<div
				class="prose prose-base prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-headings:before:content-['#'] sm:prose-th:before:content-none w-full lg:!max-w-none"
			>
				<slot />
				<WebMentions />
			</div>
		</div>
		<ContentFooter />
		<GiscusComment client:load />
		<div class="mt-8 border-t pt-4">
			<ShareButtons />
		</div>
	</ArticleContainer>
	<button
		class="hover:border-link fixed end-4 bottom-8 z-90 flex h-10 w-10 translate-y-28 cursor-pointer items-center justify-center rounded-full border-2 border-transparent bg-zinc-200 text-3xl opacity-0 transition-all transition-discrete duration-300 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 sm:end-8 sm:h-12 sm:w-12 dark:bg-zinc-700"
		data-show="false"
		id="to-top-btn"
	>
		<span class="sr-only">Back to top</span>
		<svg
			aria-hidden="true"
			class="h-6 w-6"
			fill="none"
			focusable="false"
			stroke="currentColor"
			stroke-width="2"
			viewBox="0 0 24 24"
			xmlns="http://www.w3.org/2000/svg"
		>
			<path d="M4.5 15.75l7.5-7.5 7.5 7.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</button>
</BaseLayout>

<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({ behavior: "smooth", top: 0 });
	});

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