function sidebarNav(items) {
	let listItems = "";

	for(let item of items) {
		let aOpen = "";
		let aClose = "";
		if(item.route) {
			aOpen = `<a class="list-action" href="${item.route}">`;
			aClose = `</a>`;
		}

		listItems += `
			<li class="list-item ${item.is_active ? "list-item-active" : ""}">
				${aOpen}${item.content}${aClose}
			</li>
		`;
	}

	return `
		<div class="sidebar block">
			<ul class="list list-nav">
				${listItems} 
			</ul>
		</div>
	`;
}

function table(caption, columns, data, tfoot) {
	let head = `<tr class="table-row">`;
	let totalColumns = 0;
	for(let key in columns) {
		head += `<th scope="col">${columns[key]}</th>`;
		totalColumns++;
	}
	head += "</tr>";

	let body = ``;
	for(let item of data) {
		body += `<tr class="table-row">`;
		for(let column in columns) {
			body += `<td>${item[column]}</td>`;
		}
		body += `</tr>`;
	}

	let foot = "";
	if(typeof tfoot != "undefined") {
		foot = `
			<tfoot class="table-foot">
				<tr class="table-row">
					<td colspan="${totalColumns}">
						${tfoot}
					</td>
				</tr>
			</tfoot>
		`
	}

	return `
		<table class="table devices-lists">
			<caption class="table-caption">${caption}</caption>
			<thead class="table-head">${head}</thead>
			<tbody class="table-body">${body}</tbody>
			${foot}
		</table>
	`;
}

function createElement(type, props, content) {
	const node = document.createElement(type);

	for (const [key, value] of Object.entries(props)) {
		if (key === "class") {
			node.className = value;
		} else if (key === "dataset") {
			Object.assign(node.dataset, value);
		} else {
			node.setAttribute(key, value);
		}
	}

	node.innerHTML = (typeof content != "undefined") ? content : "";
	return node; 
}

function createAlert(type, content) {
	if(["primary", "success", "secondary", "info", "warning", "error", "danger"].indexOf(type) < 0) {
		return console.error("createAlert()", "Error of type: " + type);
	}

	return createElement("div", {
		class: `alert alert-${type}`,
	}, content);
}

function deviceFieldsUnification(data) {
	const map = {
		"device_name": "name",
		"device_hard_id": "device_id",
		"device_ip": "ip",
		"device_type": "type",
		"ip_address": "ip",
		"mac_address": "mac",
		"device_mac": "mac",
		"core_version": "firmware_core_version"
	};

	const dataObj = {};

	for(let field in data) {
		if(typeof map[field] != "undefined") {
			dataObj[ map[field] ] = data[field];
			continue;
		}

		dataObj[field] = data[field];
	}

	return dataObj;
}

function btnLoadingState(btn, isLoading) {
	if(btn?.isLoading == isLoading) {
		return false;
	}

	if(isLoading) {
		btn.isLoading = true;
		btn.originalContent = btn.innerHTML;
		if(btn.classList.contains("with-icon")) {
			btn.originalWithIcon = true;
		} else {
			btn.classList.add("with-icon");
		}

		btn.classList.add("loading-state");
		btn.setAttribute("disabled", "disabled");
		btn.innerHTML = `<i class="ph-bold ph-spinner"></i> Loading`;
	} else {
		btn.isLoading = false;
		if(!btn.originalContent) {
			return false;
		}
		btn.removeAttribute("disabled");
		btn.classList.remove("loading-state");
		if(!btn.originalWithIcon) {
			btn.classList.remove("with-icon");
		}
		btn.innerHTML = btn.originalContent;
	}

	return btn;
}

export default {
	template: {
		sidebarNav,
		table,
		createElement,
		createAlert
	},
	unification: {
		deviceFieldsUnification
	},
	states: {
		btnLoadingState
	}
}