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

const tabParsePanel = document.getElementById("tabParse-panel");
let wasParseResultAppended = false;

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

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

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

	const response = await fetch(url);
	const twtxtFile = await response.text();
	const parsedFile = parseTwtxt(twtxtFile);

	console.log(parsedFile);

	tabParsePanel.classList.remove("isLoading");

	if (wasParseResultAppended) {
		document.getElementById("preParseResult").outerHTML = `
            <pre id="preParseResult">${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="preParseResult">${JSON.stringify(
					parsedFile,
					null,
					2,
				).replace(
					// to color properties
					/"\w+":/g,
					(val) => `<span class="code-str">${val}</span>`,
				)}</pre>
            </figure>
        </details>
    `;

	tabParsePanel.insertAdjacentHTML("beforeend", resultsHTML);

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

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

	wasParseResultAppended = true;
});

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

["parseHipsterButton", "parsePirateButton", "parseSaganButton"].forEach(
	(curr) => {
		document
			.getElementById(curr)
			.addEventListener("click", parseClickHandler);
	},
);