import { sidebarTemplate } from "./scripts-funcs.js";
import { actionDetailsPopup } from "./scripts-action-popup.js";

function prepareData(data) {
	const preparedData = [];

	for(let script of data.scripts) {
		preparedData.push({
			alias: script.alias,
			author: script.created_by,
			name: script.name,
			icon: script.icon ?? '<i class="ph ph-play"></i>',
			description: script.description,
			filename: `${script.filename}<br><code><small>${script.path}</small></code>`,
			state: script.state,
			code: script.code
		});
	}

	return preparedData;
}

function renderingMainGrid(scr, data, total) {
	let grid = `<div class="f-grid g-5 w-100">`;

	const provideSciptsData = {};

	for(let item of data) {
		provideSciptsData[item.alias] = item;

		const cardColor = item.state == "enabled" ? "primary" : "warning";
		grid += `
			<div class="card device-action card-${cardColor}">
				<span class="card-title">${item.name}</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-icon">
							${item.icon}
						</div>
					</div>

					<div class="device-name mb-2">${item.description}</div>
					<button 
						class="btn btn-primary btn-small with-icon action-details-btn" 
						data-alias='${item.alias}'
					>
						<i class="ph ph-folder-open"></i> details
					</button>
				</div>
			</div>
		`;
	}
	grid += `</div>`;

	const mainContainer = scr.currentScreen.DOMObject.querySelector(".main-container");
	mainContainer.innerHTML = grid;
	scr.currentScreen.DOMObject.provideSciptsData = provideSciptsData;
}

function initMainTableInteractiveElements(scr, sh_api) {
	// scr.currentScreen.DOMObject.querySelectorAll(".change-state-btn").forEach(btn => {
	// 	btn.addEventListener("click", e => {
	// 		const btn = e.currentTarget;
	// 		if(btn.getAttribute("disabled")) {
	// 			return ;
	// 		}

	// 		const methName = btn.dataset.value == "enable"
	// 			? "regular_enable"
	// 			: "regular_disable"

	// 		const script = JSON.parse(btn.dataset.script);
	// 		Helper.states.btnLoadingState(btn, true);
	// 		sh_api.scripts[methName](script.alias, (err, data, meta) => {
	// 			Helper.states.btnLoadingState(btn, false);

	// 			if(data) {
	// 				setTimeout(() => Screens.reinit(), 250);
	// 				Toasts.createSuccess(
	// 					`Request Success`,
	// 					`State of <b>${script.alias}</b> was changed`
	// 				).show();
	// 			} else {
	// 				Toasts.createError(
	// 					"Request failed",
	// 					`Regular script state not changed`
	// 				).show();
	// 			}

	// 		});
	// 	});
	// });

	scr.currentScreen.DOMObject.querySelectorAll(".action-details-btn").forEach(btn => {
		btn.addEventListener("click", e => {
			const btn = e.currentTarget;
			const script = scr.currentScreen.DOMObject.provideSciptsData[btn.dataset.alias] ?? {};

			console.log("SCRIPT", script);
			actionDetailsPopup(script, sh_api).show();
		});
	});
}

function actions(sh_api) {
	return {
		title: "Scripts Actions",
		alias: "scripts-actions",
		renderer: () => {
			return Helper.template.mainTemplate(sidebarTemplate("actions"));
		},
		initer: scr => {
			sh_api.scripts.actions_list((err, resp, meta) => {
				console.log("sh_api.scripts.regular_list", err, resp, meta);

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

				renderingMainGrid(scr, prepareData(resp.data), resp.data.total);
				initMainTableInteractiveElements(scr, sh_api);

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

export {
	actions
}