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

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

	for(let scope of data.scopes) {
		const state = scope.state == "enabled"
			? `<span class="badge badge-success">Enabled</span>`
			: `<span class="badge badge-primary">Disabled</span>`;

		const btnSwitch = scope.state == "disabled"
			? `<button 
					class="btn btn-success btn-small change-state-btn" 
					data-scope='${JSON.stringify(scope)}'
					type="button"
					data-value="enable"
				>Enable</button>`
			: `<button 
					class="btn btn-warning btn-small change-state-btn" 
					data-scope='${JSON.stringify(scope)}'
					type="button"
					data-value="disable"
				>Disable</button>`;

		preparedData.push({
			name: scope.name,
			filename: scope.filename,
			state: state,
			actions: `
				${btnSwitch}
			`
		});
	}

	return preparedData;
}

// function getDeviceIcon(device) {
// 	const iconTypeMap = {
// 		relay: `<i class="ph ph-power"></i>`,
// 		button: `<i class="ph ph-radio-button"></i>`
// 	};

// 	const icon = iconTypeMap[device.type] ?? "";
// 	return `${icon} OFF`;
// }

function renderingScopesTable(scr, data, total) {
	console.log("renderingScopesTable", data);

	scr.currentScreen.DOMObject.querySelector(".scopes-container").innerHTML = Helper.template.table(
		"Scopes list", 
		{
			name: "Scope name", 
			filename: "Filename", 
			state: "Status", 
			actions: "Actions"
		},
		data,
		`<span class="table-meta">Total: <span class="total">${total}</span> scopes</span>`
	);
}

function initTableInteractiveElements(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"
				? "scope_enable"
				: "scope_disable"

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

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

			});
		});
	});
}

function scopes(sh_api) {
	return {
		title: "Scripts Scopes",
		alias: "scripts-scopes",
		renderer: () => {
			const sidebar = sidebarTemplate("scopes");

			return `
				<div class="container">
					<div class="row g-6">
						<div class="col sidebar-container">
							${sidebar}
						</div>
						<div class="col scopes-container w-100"></div>
					</div>
				</div>
			`;
		},
		initer: scr => {
			sh_api.scripts.scopes_list((err, resp, meta) => {
				console.log("sh_api.scripts.scopes_list", err, resp, meta);

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

				renderingScopesTable(scr, prepareData(resp.data), resp.data.total);
				initTableInteractiveElements(scr, sh_api);

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

export {
	scopes
}