import { 
	runActionScript, 
	setActionCardEventsHandlers, 
	createActionCardHtml,
	createActionCard,
} from "../scripts/scripts-funcs.js";
import { prepareData } from "../scripts/scripts-actions-screen.js";
// import { actionDetailsPopup } from "./scripts-action-popup.js";

export function areaActionsModal(area, sh_api) {
	console.log("areaActionsModal", area);

	return Modals.create("area-actions-modal", {
		title: `<i class="ph ph-map-trifold normalize"></i> ${area.display_name}`,
		body: modal => {
			return `
				<div class="loader"></div>
				<div class="actions-container f-grid g-4 h-100">
				</div>
			`;
		},
		actions: modal => {
			const btnCancel = Helper.template.createElement("button", {
				class: "btn btn-primary"
			}, "Close");

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

			return [ btnCancel ];
		},
		onready: modal => {
			const actionsCardsContainer = modal.querySelector(".actions-container");
			const loader = modal.querySelector(".loader");

			sh_api.areas.scripts(area.id, (err, resp, meta) => {
				console.log("sh_api.areas.scripts", err, resp, meta);

				if(meta.status_code != 200) {
					return Toasts.createDanger(
						"Loading failed",
						`Area: <b>${area.display_name}</b>`
					).show();
				}

				const actions = prepareData(resp.data);
				actionsCardsContainer.innerHTML = "";
				
				if(!actions.length) {
					actionsCardsContainer.innerHTML = Helper.template.emptyHereHTML();
				}

				loader.remove();
				for(let item of actions) {
					actionsCardsContainer.append(createActionCard(sh_api, item));
				}
			});	

			// const devicesContainer = modal.querySelector(".devices-container");
			// const loader = modal.querySelector(".loader");

			// sh_api.areas.devices(area.id, (err, data, meta) => {
			// 	console.log("sh_api.areas.devices", data);

			// 	function prepareDevicesData(data) {
			// 		if(!data) {
			// 			return [];
			// 		}

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

			// 			preparedData.push({
			// 				deviceName: device.name,
			// 				alias: device.alias,
			// 				status: Helper.template.connectionStatusBadge(device.connection_state),
			// 				ip: `<code class="code">${device.ip}</code>`,
			// 				actions: `
			// 					<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;
			// 	}

			// 	const devices = prepareDevicesData(data?.data);

			// 	devicesContainer.innerHTML = Helper.template.table(
			// 		"", 
			// 		{
			// 			deviceName: "Device name", 
			// 			alias: "Device alias", 
			// 			status: "Status", 
			// 			ip: "IP", 
			// 			actions: "Actions"
			// 		},
			// 		devices,
			// 		`<span class="table-meta">Total: <span class="total">${devices.length}</span> devices</span>`
			// 	);

			// 	devicesContainer.querySelectorAll(".reboot-btn").forEach(rebootBtn => {
			// 		rebootBtn.addEventListener("click", e => {
			// 			if(rebootBtn.getAttribute("disabled")) {
			// 				return ;
			// 			}

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

			// 	loader.remove();

			// 	console.log("devices", devices);
			// });
		}
	});
}