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

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", "");
				}

				const preparedData = [];
				for(let device of resp.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>
						`
					});
				}
				
				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">${resp.data.total}</span> devices</span>`
				);

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

						const btnReboot = e.currentTarget;
						Helper.states.btnLoadingState(btnReboot, true);
						const deviceId = e.currentTarget.dataset.deviceId;
						const deviceName = e.currentTarget.dataset.deviceName;
						const deviceAlias = e.currentTarget.dataset.deviceAlias;
						sh_api.devices.reboot(
							deviceId,
							(err, data, meta) => {
								Helper.states.btnLoadingState(btnReboot, false);
								
								console.log("Reboot done", err, data, meta);
								if(data) {
									Toasts.createSuccess(
										"Reboot successful",
										`Device: ${deviceName}<br>
										Alias: <b>${deviceAlias}</b>`
									).show();
								} else {
									Toasts.createError(
										"Reboot failed",
										`Device: ${deviceName}<br>
										Alias: <b>${deviceAlias}</b>`
									).show();
								}
							}
						);
					});
				});

				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();
					});
				});

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

export {
	list
}