export function deviceDetailsPopup(device, sh_api) {
	console.log(device);

	return Modals.create("device-popup", {
		title: `Device ${device.name}`,
		body: modal => {
			let deviceProperties = "";
			for(let field in device) {
				deviceProperties += `
					<tr class="table-row">
						<th>${field}: </th>
						<td>${device[field]}</td>
					</tr>
				`;
			}

			return `
				<div class="block">
					<table class="table" style="border: 0">
						<tbody class="table-body">
							${deviceProperties}
						</tbody>
					</table>
				</div>
			`;
		},
		actions: modal => {
			const buttonCancel = document.createElement("button");
			buttonCancel.classList.add("btn");
			buttonCancel.classList.add("btn-primary");
			buttonCancel.innerHTML = "Closed";

			buttonCancel.addEventListener("click", e => {
				modal.close();
			});

			const buttonReboot = document.createElement("button");
			buttonReboot.classList.add("btn");
			buttonReboot.classList.add("btn-warning");
			buttonReboot.classList.add("with-icon");
			buttonReboot.innerHTML = '<i class="ph ph-arrow-clockwise"></i> Reboot';

			buttonReboot.addEventListener("click", e => {
				sh_api.devices.reboot(
					device.id,
					(err, data, meta) => {
						console.log("Reboot done");

						modal.close();

						setTimeout(() => {
							Toasts.createSuccess(
								"Reboot successful",
								`Device: ${device.name}<br>
								Alias: <b>${device.alias}</b>`
							).show();
						}, 300);
					}
				);
			});

			const buttonRemove = document.createElement("button");
			buttonRemove.classList.add("btn");
			buttonRemove.classList.add("btn-danger");
			buttonRemove.classList.add("with-icon");
			buttonRemove.innerHTML = '<i class="ph ph-trash"></i> Remove';

			buttonRemove.addEventListener("click", e => {
				confirmPopup(
					"Are you sure you want to remove this device?", 
					() => {
						sh_api.devices.remove(
							device.id,
							(err, data, meta) => {
								console.log("Was removed");

								modal.close();

								setTimeout(() => {
									Toasts.createSuccess(
										"Removed",
										`
										Device: ${device.name}<br>
										Alias: <b>${device.alias}</b><br>
										IP: <b>${device.device_ip}</b>
										`
									).show();
								}, 300);
							}
						);
				}, 
				() => {
					console.log("CANCELED");
				});
			});

			return [ buttonCancel, buttonReboot, buttonRemove ];
		}
	});
}