---
import UIString from "./UIString.astro";

interface Props {
	url: string;
	id: string;
	lang: LanguageKeys;
}

const { url, id, lang } = Astro.props as Props;
---

<footer itemscope itemtype="http://schema.org/UserComments">
	<h2><UIString key={"articlePost.comments"} />:</h2>
	<div id="remark42"></div>
</footer>

<script is:inline define:vars={{ url, id, lang }}>
	window.remark_config = {
		host: "https://remark.yarkov.tech",
		site_id: "remark",
		theme: window.theme,
		show_email_subscription: true,
		url,
		locale: lang,
		no_footer: true,
	};

	var e = document.getElementById("remark42");
	if ("IntersectionObserver" in window) {
		var t = new IntersectionObserver((e) => {
			e.forEach((e) => {
				if (e.isIntersecting) {
					((e, n) => {
						for (var o = 0; o < e.length; o++) {
							var r = n.createElement("script"),
								c = ".js",
								d = n.head || n.body;
							("noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
								(r.defer = !0),
								(r.src = remark_config.host + "/web/" + e[o] + c),
								d.appendChild(r));
						}
					})(remark_config.components || ["embed"], document);
					t.unobserve(e.target);
				}
			});
		});
		t.observe(e);
	}

	window.addEventListener("onthemetoggled", (e) => window.REMARK42.changeTheme(e.detail));
</script>