import { runActionScript } from "./scripts-funcs.js";
import { placeInArea } from "../areas/areas-placeto-component.js";

export function actionDetailsPopup(script, sh_api) {
	console.log("actionDetailsPopup", script);

	return Modals.create("action-script-popup", {
		title: `${script.name}`,
		body: modal => {
			const placeInAreaContainer = (script.area_id != -1) 
				? `<div class="mt-8 mb-8 place-in-area-component-container"></div>`
				: "";

			return `
				<div class="block">
					<div class="row g-4">
						<div class="col script-info w-100">
							<h4 class="alias"><i class="ph ph-link-simple-break normalize"></i> <code>${script.alias}</code></h4>
							<div class="description mt-3">${script.description}</div>
							<div class="state mt-10">${Helper.template.toogleStateBadge(script.state)}</div>
							${placeInAreaContainer}
							<div class="filename mt-4"><i class="ph ph-file-code normalize"></i> ${script.filename}</div>
							<div class="author mt-4 text-muted"><i class="ph ph-user normalize"></i> By ${script.author}</div>
						</div>
						<div class="col script-code w-200">
							<div class="script-code-view">
								<pre><code class="language-php code-viewer fs-xs">${script.code}</code></pre>
							</div>
						</div>
					</div>
				</div>
			`;
		},
		actions: modal => {
			const btnCancel = Helper.template.createElement("button", {
				class: "btn btn-primary"
			}, "Close");

			const btnChangeState = Helper.template.createElement("button", {
				class: script.state == "enabled" ? "btn btn-warning" : "btn btn-success",
				"data-value": script.state == "enabled" ? "disable" : "enable"
			}, script.state == "enabled" ? `Disable` : "Enable");


			const btnRun = Helper.template.createElement("button", {
				class: "btn btn-secondary with-icon"
			}, `<i class="ph ph-play"></i> Run`);

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

			btnChangeState.addEventListener("click", e => {
				const btn = e.currentTarget;
				if(btn.getAttribute("disabled")) {
					return ;
				}

				const methName = btn.dataset.value == "enable"
					? "action_enable"
					: "action_disable"

				// const script = scr.currentScreen.DOMObject.provideSciptsData[btn.dataset.alias] ?? {};

				Helper.states.btnLoadingState(btn, true);
				sh_api.scripts[methName](script.alias, (err, data, meta) => {
					Helper.states.btnLoadingState(btn, false);
					modal.close();

					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();
					}

				});
			});

			btnRun.addEventListener("click", e => {
				const btn = e.currentTarget;
				Helper.states.btnLoadingState(btn, true);

				runActionScript(sh_api, script.alias, resultFlag => {
					Helper.states.btnLoadingState(btn, false);
					if(resultFlag) {
						modal.close();
					}
				});
			});

			return [ btnCancel, btnChangeState, btnRun ];
		},
		onready: modal => {
			placeInArea(
				sh_api,
				modal.querySelector(".place-in-area-component-container"),
				"action",
				script.id,
				script.area_id
			);

			hljs.highlightElement(modal.querySelector(".code-viewer"));
		}
	});
}