import { loadAndParseTwtxtFile } from "/dist-browser/twtxt-lib.js";

const tabLoadAndParsePanel = document.getElementById("tabLoadAndParse-panel");
let wasLoadAndParseResultAppended = false;

document
	.getElementById("formLoadAndParse")
	.addEventListener("submit", async (ev) => {
		ev?.preventDefault();
		tabLoadAndParsePanel.classList.add("isLoading");

		const loadAndParseURL = document.getElementById("loadAndParseURL");

		const url =
			loadAndParseURL?.value || "/twtxt-demos/demo-hipster-twtxt.txt";

		const parsedFile = await loadAndParseTwtxtFile(url);

		console.log(parsedFile);

		tabLoadAndParsePanel.classList.remove("isLoading");

		if (wasLoadAndParseResultAppended) {
			document.getElementById("preLoadAndParseResult").outerHTML = `
                <pre id="preLoadAndParseResult">${JSON.stringify(
					parsedFile,
					null,
					2,
				).replace(
					// to color properties
					/"\w+":/g,
					(val) => `<span class="code-str">${val}</span>`,
				)}</pre>
            `;
			return;
		}

		const resultsHTML = `
            <details open="true">
                <summary>Results</summary>
                <figure>
                    <pre id="preLoadAndParseResult">${JSON.stringify(
						parsedFile,
						null,
						2,
					).replace(
						// to color properties
						/"\w+":/g,
						(val) => `<span class="code-str">${val}</span>`,
					)}</pre>
                </figure>
            </details>
        `;

		tabLoadAndParsePanel.insertAdjacentHTML("beforeend", resultsHTML);

		document
			.querySelector("#tabLoadAndParse-panel .js-sourceDetails")
			?.removeAttribute("open");

		document.body.classList.add("isLoaded");

		wasLoadAndParseResultAppended = true;
	});

const loadAndParseClickHandler = (ev) => {
	ev?.preventDefault();
	loadAndParseURL.value = ev.target.dataset.url;
};

[
	"loadAndParseHipsterButton",
	"loadAndParsePirateButton",
	"loadAndParseSaganButton",
].forEach((curr) => {
	document
		.getElementById(curr)
		.addEventListener("click", loadAndParseClickHandler);
});