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

import Masthead from "@/components/blog/Masthead.astro";
import PostNavigation from "@/components/blog/PostNavigation.astro";
import { t } from "@/i18n/translations";

import BaseLayout from "./Base.astro";

interface Props {
	post: CollectionEntry<"post">;
	prevPost: CollectionEntry<"post"> | null | undefined;
	nextPost: CollectionEntry<"post"> | null | undefined;
}

const { post, prevPost, nextPost } = Astro.props;
const { ogImage, title, description, updatedDate, publishDate, language } = post.data;
const socialImage = ogImage ?? `/og-image/${post.id}.png`;
const articleDate = updatedDate?.toISOString() ?? publishDate.toISOString();
---

<BaseLayout
	meta={{
		articleDate,
		description,
		ogImage: socialImage,
		title,
		lang: language,
	}}
>
	<article class="grow break-words" data-pagefind-body>
		<div id="blog-hero" class="mb-12">
			<Masthead content={post} language={language} />
		</div>
		<div
			class="prose prose-sm prose-cactus 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 max-w-none"
		>
			<slot />
			{
				post.data.sourceUrl && (
					<p class="mt-8 border-t border-gray-200 pt-6 text-sm dark:border-gray-700">
						<a
							href={post.data.sourceUrl}
							class="cactus-link"
							target="_blank"
							rel="noopener noreferrer"
						>
							{t(language, "viewOriginalPost")}
						</a>
					</p>
				)
			}
		</div>
	</article>
	<PostNavigation prevPost={prevPost} nextPost={nextPost} language={language} />
	<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">{t(language, "backToTop")}</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>

<script>
	import mediumZoom from "medium-zoom";

	mediumZoom("[data-zoomable]", {
		margin: 8,
		background: "rgba(0, 0, 0, 0.2)",
	});
</script>