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 = Helper.template.createElement("button", {
				class: "btn btn-primary"
			}, "Close");

			const buttonReboot = Helper.template.createElement("button", {
				class: "btn btn-warning with-icon"
			}, '<i class="ph ph-arrow-clockwise"></i> Reboot');

			const buttonRemove = Helper.template.createElement("button", {
				class: "btn btn-danger with-icon"
			}, '<i class="ph ph-trash"></i> Remove');

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

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

						modal.close();

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

			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.ip}</b>
										`
									).show();
								}, 300);
							}
						);
				}, 
				() => {
					console.log("CANCELED");
				});
			});

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