import { sidebarTemplate, runActionScript } 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} script-action" 
				data-alias="${item.alias}"
			>
				<span class="card-title">${item.name} 
					<button 
						class="btn-icon without-hover action-details-btn" 
						data-alias='${item.alias}'
					>
						<i class="ph ph-dots-three-vertical"></i>
					</button>
				</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>
				</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(".script-action .card-content").forEach(actionCard => {
		actionCard.addEventListener("click", e => {
			const actionCard = e.currentTarget.parentNode;
			if(actionCard.getAttribute("disabled")) {
				return ;
			}

			Helper.states.cardScriptActionLoadingState(actionCard, true);

			const alias = actionCard.dataset.alias;
			runActionScript(sh_api, alias, resultFlag => {
				Helper.states.cardScriptActionLoadingState(actionCard, false);

				if(resultFlag) {
					actionCard.classList.add("card-success");
					setTimeout(() => actionCard.classList.remove("card-success"), 1000);
				}
			});

		});
	});

	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
}