import { sidebarTemplate } from "./areas-funcs.js";
import { areaDevicesModal } from "./areas-devices-modal.js";

function makeTree(data) {
	const items = data.areas;

	const map = {};
  const roots = [];

  for (const item of items) {
    map[item.id] = { ...item, children: [] };
  }

  for (const item of items) {
    const node = map[item.id];

    if (item.parent_id && map[item.parent_id]) {
      map[item.parent_id].children.push(node);
    } else {
      roots.push(node);
    }
  }

  return roots;
}

function prepareData(data) {
	const tree = makeTree(data);
	return tree;
}

function renderingBranch(branch) {
	let html = `<div class="branch">`;
	html += `
		<div class="branch">
			<div class="branch-container">
				<div class="branch-info">
					<span class="title"><i class="ph ph-map-trifold normalize"></i> ${branch.display_name}</span>
					[
					<span class="text-muted area-type">${branch.type}</span>
					<span><i class="ph ph-link-simple-break normalize"></i> ${branch.alias}</span>
					]
				</div>

				<div class="row g-4">
					<button 
						class="btn btn-accent btn-small with-icon"
						data-area-id="${branch.id}"
						data-area-name="${branch.display_name}"
					><i class="ph ph-brackets-curly"></i> Scripts</button>
					<button 
						class="btn btn-accent btn-small with-icon devices" 
						data-area-id="${branch.id}"
						data-area-name="${branch.display_name}"
					><i class="ph ph-cpu"></i> Devices</button>
					<button 
						class="btn btn-small btn-primary"
					>Details</button>
				</div>
			</div>
		</div>
	`;

	if(branch.children?.length) {
		for(let childBranch of branch.children) {
			html += renderingBranch(childBranch);
		}
	}

	html += "</div>";
	return html;
}

function renderingAreasTree(scr, tree) {
	console.log("TREE", tree);
	let html = `<div class="tree">`;
	for(let branch of tree) {
		html += renderingBranch(branch);
	}
	html += "</div>";

	scr.currentScreen.DOMObject.querySelector(".main-container").innerHTML = html;
}

function initAreasTree(scr, sh_api) {
	scr.currentScreen.DOMObject.querySelectorAll(".btn.devices").forEach(btn => {
		btn.addEventListener("click", e => {
			const btn = e.currentTarget;
			const areaId = btn.dataset.areaId;
			const name = btn.dataset.areaName;

			areaDevicesModal({ id: areaId, name }, sh_api).show();
		});
	});

	scr.ready();
}

function areasTree(sh_api) {
	return {
		title: "Areas Tree",
		alias: "areas-tree",
		renderer: () => {
			return Helper.template.mainTemplate(sidebarTemplate("areas-tree"));
		},
		initer: scr => {
			sh_api.areas.list((err, resp, meta) => {
				console.log("sh_api.areas.list", err, resp, meta);

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

				renderingAreasTree(scr, prepareData(resp.data));
				initAreasTree(scr, sh_api);

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

export {
	areasTree
}