const $ = selector => {
	const elements = document.querySelectorAll(selector);

	return elements.length === 1 ? elements[0] : elements;
};

const Services = {};

const SaveServices = () => {
	const body = new FormData();
	body.append("nonce", wpsi.nonce);
	body.append("action", "wpsi-ajax");
	body.append("services", JSON.stringify(Services));

	fetch(wpsi.adminURL, {
		method : "POST",
		body
	}).catch(error => console.error(error));
};

document.addEventListener("DOMContentLoaded", () => {
	inputs = $(".wpsi-icon-selector");
	
	for (const input of inputs) {
		if (!(input instanceof HTMLElement))
			continue;
		const service = input.getAttribute("data-icon");
		if (!service || service === "")
			continue;	
		const value = input.value;

		if (value && value !== "")
			Services[service] = value;
		if (value === "")
			delete Services[service];

		input.addEventListener("change", event => {
			Services[service] = event.target.value;	
			SaveServices();	
		});
	}
});