import { sidebarTemplate, rebootDeviceBtnHandler } from "./devices-funcs.js";
import { deviceDetailsPopup } from "./device-details-popup.js";

function prepareData(data) {
	const preparedData = [];
	for(let device of data.devices) {
		device = Helper.unification.deviceFieldsUnification(device);

		const connectionState = device.connection_state == "active"
			? `<span class="badge badge-success">Online</span>`
			: `<span class="badge badge-warning">Offline</span>`;

		preparedData.push({
			deviceName: device.name,
			alias: device.alias,
			status: connectionState,
			ip: `<code class="code">${device.ip}</code>`,
			actions: `
				<button 
					class="btn btn-secondary btn-small details-btn" 
					data-device='${JSON.stringify(device)}'
					type="button"
				>Details</button>

				<button 
					class="btn btn-warning btn-small reboot-btn" 
					data-device-id="${device.id}" 
					data-device-name="${device.name}" 
					data-device-alias="${device.alias}" 
					type="button"
				>Reboot</button>
			`
		});
	}

	return preparedData;
}

function renderingDevicesTable(scr, preparedData, total) {
	scr.currentScreen.DOMObject.querySelector(".devices-container").innerHTML = Helper.template.table(
		"Devices list", 
		{
			deviceName: "Device name", 
			alias: "Device alias", 
			status: "Status", 
			ip: "IP", 
			actions: "Actions"
		},
		preparedData,
		`<span class="table-meta">Total: <span class="total">${total}</span> devices</span>`
	);
}

function initTableInteractiveElements(scr, sh_api) {
	scr.currentScreen.DOMObject.querySelectorAll(".reboot-btn").forEach(btn => {
		btn.addEventListener("click", e => {
			if(e.currentTarget.getAttribute("disabled")) {
				return ;
			}

			rebootDeviceBtnHandler(sh_api, e.currentTarget);
		});
	});

	scr.currentScreen.DOMObject.querySelectorAll(".details-btn").forEach(btn => {
		btn.addEventListener("click", e => {
			const device = JSON.parse(e.currentTarget.dataset.device);
			deviceDetailsPopup(device, sh_api).show();
		});
	});
}

function list(sh_api) {
	return {
		alias: "devices",
		renderer: () => {
			const sidebar = sidebarTemplate("devices");

			return `
				<div class="container">
					<div class="row g-6">
						<div class="col sidebar-container">
							${sidebar}
						</div>
						<div class="col devices-container"></div>
					</div>
				</div>
			`;
		},

		initer: scr => {
			sh_api.devices.list((err, resp, meta) => {
				console.log("sh_api.devices.list", err, resp, meta);

				if(meta.status_code != 200) {
					return scr.error("Server API ERROR", "");
				}

				renderingDevicesTable(scr, prepareData(resp.data), resp.data.total);
				initTableInteractiveElements(scr, sh_api);

				scr.ready();
			});
		}
	};
}

export {
	list
}