import { DmarcRecord } from "../records/DmarcRecord.js";
import { SpfRecord } from "../records/SpfRecord.js";

const records = {
	"/dmarc-creator": DmarcRecord,
	"/spf-creator": SpfRecord,
};

const Record = records[location.pathname];

addFields(document.getElementById("form"), Record.fields.filter(field => !field.categoryName));

const categories = Record.fields.map(field => field.categoryName).filter(isUnique).filter(val => val);

for (const category of categories) {
	const details = document.createElement("details");
	details.innerHTML = `<summary>${Record.categories[category]}</summary>`;

	document.getElementById("form").appendChild(details);

	addFields(details, Record.fields.filter(field => field.categoryName === category));
}

function addFields(elem, fields) {
	for (const field of fields) {
		if (field.isHidden || !field.getInputHtml()) continue;

		elem.innerHTML += `
			<label for="${field.key}">${field.displayName}</label>
			<p class="description">${field.description ?? ""}</p>
			${field.getInputHtml()}
		`;
	}
}

document.getElementById("form").onchange = generate;
generate();

function generate(event) {
	document.getElementById("record").value = Record.fieldsToString();
}

document.getElementById("record").onclick = (e) => {
	e.target.select();
	document.execCommand("copy");
}

function isUnique(value, index, array) {
	return array.indexOf(value) === index;
}