---
import './code-component.css';

interface Props {
	code: string;
	ins?: string;
	del?: string;

	__test_mode?: boolean;
}

const { code, del, ins, __test_mode = false } = Astro.props;

const escapeHtml = (s: string) =>
	s
		.replaceAll('&', '&')
		.replaceAll('<', '&lt;')
		.replaceAll('>', '&gt;')
		.replaceAll('"', '&quot;')
		.replaceAll("'", '&#39;');

const htmlCode = code
	.split('\n')
	.map((line) => `<span class="line">${escapeHtml(line)}</span>`)
	.join('\n');

const props: Record<string, string> = {};

/* v8 ignore start */
if (del) {
	props['data-lines-deleted'] = del;
}

if (ins) {
	props['data-lines-inserted'] = ins;
}
/* v8 ignore stop */

const id = __test_mode ? 'test-id' : Math.random().toString(36).substring(2, 9);
---

<pre class="playground-code-container"><code id={id} class:list={["custom-code", (del || ins) ? 'diff' : '']} {...props} set:html={htmlCode} /></pre>
<script is:inline define:vars={{ id: id }}>

	(function () {
		const codesWithDiff = document.getElementById(id);

		if (!codesWithDiff) return;

		const code = codesWithDiff.classList.contains("diff");

		if (!code) return;

		const linesInserted = codesWithDiff.getAttribute("data-lines-inserted");
		const linesDeleted = codesWithDiff.getAttribute("data-lines-deleted");

		if (!linesInserted && !linesDeleted) return;

		const parsedInsertedLines =
			linesInserted?.split(",").map((line) => parseInt(line, 10)) || [];
		const parsedDeletedLines =
			linesDeleted?.split(",").map((line) => parseInt(line, 10)) || [];

		const codeLines = codesWithDiff.querySelectorAll(".line");

		codeLines.forEach((line, index) => {
			if (parsedInsertedLines.includes(index + 1)) {
				line.classList.add("diff", "ins");
			}

			if (parsedDeletedLines.includes(index + 1)) {
				line.classList.add("diff", "del");
			}
		});
	})();

</script>