var presets = {
	// gender
	trans: ["5BCEFA", "F5A9B8", "FFFFFF", "F5A9B8", "5BCEFA"],
	transfem: ["73deff","ffe0ed","ffb5d5","ff8cbe","ffb5d5","ffe0ed","73deff"],
	transmasc: ["FF8ABD","CDF5FE","9AEBFF","74DFFF","9AEBFF","CDF5FE","FF8ABD"],
	xenogender: ["ff6691","ff9997","ffb782","fbffa6","84bbff","9c84ff","a317ff"],
	enby: ["FCF434", "FFFFFF", "9C59D1", "2C2C2C"],
	agender: ["000000", "bababa", "ffffff", "b9f484", "ffffff", "bababa", "000000"],
	genderfluid: ["FF76A4", "FFFFFF", "C011D7", "000000", "2F3CBE"],
	opossum: ["2f2f2f","b0bfc6","e0e0e0","ffffff","f1ba94","f19f93","e37671"],

	// sexuality
	lesbian: ["D52D00", "EF7627", "FF9A56", "FFFFFF", "D162A4", "B55690", "A30262"],
	asexual: ["000000", "A3A3A3", "FFFFFF", "800080"],
	sapphic: ["FD8BA8", "FBF2FF", "FD8BA8"],
	bisexual: ["D60270", "D60270", "9B4F96", "0038A8", "0038A8"],
	pansexual: ["FF218C", "FFD800", "21B1FF"],
	omnisexual: ["FE9ACE", "FF53BF", "200044", "6760FE", "8EA6FF"],

	// romantic attraction
	aromantic: ["3DA542", "A7D379", "FFFFFF", "A9A9A9", "000000"],

	// misc
	aroace: ["ef9007", "f6d317", "ffffff", "45bcee", "1e3f54"],
	polyam: ["00c2ff", "ff006a", "0a1027"],
	pride: ["E40303", "FF8C00", "FFED00", "008026", "24408E", "732982"],
	custom: [],
};

var stripediv = document.querySelector("div#stripes");

var add = document.querySelector("#addrow");
var addColor = add.children[0].children[0];
var addButton = add.children[1].children[0];

function addstripe(color) {
	var del = add.cloneNode(true);
	del.id = "delrow";
	var removeColor = del.children[0].children[0];
	removeColor.readonly = removeColor.disabled = true;
	removeColor.value = color;
	var removeButton = del.children[1].children[0];
	removeButton.children[0].icon = "ph:minus";
	removeButton.onclick = () => {
		del.parentElement.removeChild(del);
		updatestripes();
	};
	stripediv.appendChild(del);
}

addButton.onclick = () => {
	if (!/^#[0-9A-F]{6}$/i.test(addColor.value)) {
		alert("Invalid color: " + addColor.value);
		return false;
	}
	addstripe(addColor.value);
	addColor.value = "#ff00ff";

	updatestripes();
};

function updatestripes() {
	var stripes = [];
	for (var stripe of document.querySelectorAll("#delrow")) {
		stripes.push(stripe.children[0].children[0].value);
	}

	var svgStripes = document.querySelector("g#stripes");
	var newStripes = [];
	var count = stripes.length;
	var height = (24 - 10 / 3) / count;
	for (var stripe in stripes) {
		var color = stripes[stripe];
		var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
		rect.setAttribute("fill", color);
		rect.setAttribute("width", 25);
		rect.setAttribute("height", height + 0.1);
		rect.setAttribute("x", 0);
		rect.setAttribute("y", 10 / 6 + stripe * height);
		newStripes.push(rect);
	}
	svgStripes.replaceChildren(...newStripes);
}

function defaultcolors() {
	if (location.host == "localhost") {
		// opossumgender pride
		addstripe("#2f2f2f");
		addstripe("#b0bfc6");
		addstripe("#e0e0e0");
		addstripe("#ffffff");
		addstripe("#f1ba94");
		addstripe("#f19f93");
		addstripe("#e37671");
	} else {
		// trans pride
		addstripe();
		addstripe();
		addstripe();
		addstripe();
		addstripe();
	}
}

defaultcolors();
updatestripes();

var presetDropdown = document.querySelector("#preset");
for (var preset of Object.keys(presets).sort()) {
	if(preset == "custom")
		continue;
	var option = document.createElement("option");
	option.value = option.innerText = preset;
	presetDropdown.appendChild(option);
}


var option = document.createElement("option");
option.value = option.innerText = "custom";
presetDropdown.appendChild(option);

presetDropdown.onchange = () => {
	stripediv.replaceChildren([]);
	for (var stripe of presets[presetDropdown.value]) {
		addstripe("#" + stripe.toLowerCase());
	}
	updatestripes();
};

presetDropdown.onchange();

var svg = document.querySelector("svg");

var resolutionDropdown = document.querySelector("#res");
var resolutions = [
	"16",
	"32",
	"64",
	"128",
	"256",
	"512",
	"1024",
	"2048",
	"4096",
];

for (var res of resolutions) {
	var option = document.createElement("option");
	option.value = res;
	option.innerText = res + "px";
	if (res == "64") {
		option.selected = true;
		option.innerText += " *";
	} else if (parseInt(res) > 256) {
		option.innerText += " !";
	}
	resolutionDropdown.appendChild(option);
}

resolutionDropdown.onchange = () => {
	var res = resolutionDropdown.value;
	svg.setAttribute("width", res);
	svg.setAttribute("height", res);
};

resolutionDropdown.onchange();

var download = function (href, name) {
	var link = document.createElement("a");
	link.download = name;
	link.style.opacity = "0";
	document.body.appendChild(link);
	link.href = href;
	link.click();
	link.remove();
};

var downloadButton = document.querySelector("#dl");
downloadButton.onclick = () => {
	svgToPng(svg, (imgData) => {
		download(imgData, "verified" + presetDropdown.value + ".png");
	});
};

function svgToPng(svg, callback) {
	svgUrlToPng(svg, (imgData) => {
		callback(imgData);
	});
}

function getSvgUrl(svg) {
	return `data:image/svg+xml;base64,${btoa(
		new XMLSerializer().serializeToString(svg)
	)}`;
}

function svgUrlToPng(svg, callback) {
	const svgUrl = getSvgUrl(svg);
	const svgImage = document.createElement("img");
	svgImage.style.opacity = 0;
	svgImage.style.position = "absolute";
	svgImage.style.zIndex = -1;
	svgImage.style.top = "-1000vh";
	document.body.appendChild(svgImage);
	svgImage.onload = function () {
		document.body.removeChild(svgImage);
		const canvas = document.createElement("canvas");
		canvas.width = svg.getAttribute("width");
		canvas.height = svg.getAttribute("height");
		// document.body.appendChild(canvas);
		const canvasCtx = canvas.getContext("2d");
		canvasCtx.drawImage(svgImage, 0, 0);
		const imgData = canvas.toDataURL("image/png");
		callback(imgData);
		// document.body.removeChild(imgPreview);
	};
	svgImage.src = svgUrl;
}