import { sidebarTemplate } from "./areas-funcs.js";
import { areaDevicesModal } from "./areas-devices-modal.js";
import { areaActionsModal } from "./areas-actions-modal.js";
import { createNewAreaModal } from "./areas-create-new-modal.js";
import { areaDetailsModal } from "./areas-details-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];
		const isSelfRef = item.parent_id && item.parent_id == item.id;
		const parentExists = item.parent_id && map[item.parent_id];

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

	if (roots.length === 0 && items.length > 0) {
		return Object.values(map);
	}

	return roots;
}

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

function renderingBranch(branch, lvl, ancestors) {
	lvl = lvl ?? 0;
	ancestors = ancestors ?? new Set();

	if (ancestors.has(branch.id)) return '';

	const nextAncestors = new Set(ancestors);
	nextAncestors.add(branch.id);

	const isFav = FavoritesStore.has(branch.id);
	const isSingle = branch.children?.length ? "" : "is-single";
	let html = `
		<div class="branch lvl-${lvl} ${isSingle}" data-lvl="${lvl}">
			<button class="btn-icon without-hover show-childs">
				<i class="ph ph-caret-right"></i>
			</button>
			<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 actions"
						data-area-id="${branch.id}"
						data-area-name="${branch.display_name}"
					><i class="ph ph-brackets-curly"></i> Actions</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"
						data-area-id="${branch.id}"
						data-area-name="${branch.display_name}"
						data-parent-id="${branch.parent_id}"
					>Details</button>
					<button
						class="btn-icon without-hover fav-toggle"
						data-area-id="${branch.id}"
						title="${isFav ? "Remove from favorites" : "Add to favorites"}"
					><i class="ph ${isFav ? "ph-star-fill" : "ph-star"}"></i></button>
				</div>
			</div>
		</div>
	`;

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

	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 .tree-container").innerHTML = html;
}

function initAreasTree(scr, sh_api) {
	scr.currentScreen.DOMObject.querySelectorAll(".btn.devices").forEach(btn => {
		btn.addEventListener("click", e => {
			areaDevicesModal({ 
				id: e.currentTarget.dataset.areaId, 
				display_name: e.currentTarget.dataset.areaName 
			}, sh_api).show();
		});
	});

	scr.currentScreen.DOMObject.querySelectorAll(".btn.actions").forEach(btn => {
		btn.addEventListener("click", e => {
			areaActionsModal({ 
				id: e.currentTarget.dataset.areaId, 
				display_name: e.currentTarget.dataset.areaName 
			}, sh_api).show();
		});
	});

	scr.currentScreen.DOMObject.querySelectorAll(".btn.details").forEach(btn => {
		btn.addEventListener("click", e => {
			areaDetailsModal({
				id: e.currentTarget.dataset.areaId,
				display_name: e.currentTarget.dataset.areaName,
				parent_id: e.currentTarget.dataset.parentId
			}, sh_api).show();
		});
	});

	scr.currentScreen.DOMObject.querySelectorAll("button.fav-toggle").forEach(btn => {
		btn.addEventListener("click", e => {
			const id = e.currentTarget.dataset.areaId;
			const isNowFav = FavoritesStore.toggle(id);
			const icon = e.currentTarget.querySelector("i");
			icon.className = `ph ${isNowFav ? "ph-star-fill" : "ph-star"}`;
			e.currentTarget.title = isNowFav ? "Remove from favorites" : "Add to favorites";
		});
	});

	scr.currentScreen.DOMObject.querySelectorAll("button.show-childs").forEach(btn => {
		btn.addEventListener("click", e => {
			const btn = e.currentTarget;
			const branch = btn.parentNode;
			const branchLvl = parseInt(branch.dataset.lvl);

			if(!btn.classList.contains("opened")) {
				btn.classList.add("opened");
				let next = branch.nextElementSibling;
				while(next) {
					const nextBranchLvl = parseInt(next.dataset.lvl);

					if(nextBranchLvl == branchLvl || nextBranchLvl < branchLvl) {
						break;
					}

					if(nextBranchLvl == branchLvl + 1) {
						next.classList.add("a-show");
					}

					next = next.nextElementSibling;
				}
			} else {
				btn.classList.remove("opened");
				let next = branch.nextElementSibling;
				while(next) {
					const nextBranchLvl = parseInt(next.dataset.lvl);

					if(nextBranchLvl == branchLvl || nextBranchLvl < branchLvl) {
						break;
					}

					if(nextBranchLvl == branchLvl + 1) {
						next.classList.remove("a-show");
					}

					next = next.nextElementSibling;
				}
			}
		});
	})

	scr.ready();
}

function areasTree(sh_api) {
	return {
		title: "Areas Tree",
		alias: "areas-tree",
		renderer: () => {
			return Helper.template.mainTemplate(
				sidebarTemplate("areas-tree"), 
				`<div class="top-bar">
					<div class="row g-4">
						<div class="col">
							<h3 class="title">Areas Tree</h3>
						</div>
						<div class="col">
							<button class="btn btn-primary with-icon create-new-area-modal">
								<i class="ph ph-plus"></i>
								Create
							</button>
						</div>
					</div>
				</div>
				<div class="mt-6 tree-container"></div>
				`
			);
		},
		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", "");
				}

				scr.currentScreen.DOMObject.provideData = {};
				if(typeof resp.data != "undefined" && typeof resp.data.areas != "undefined") {
					for(let item of resp.data.areas) {
						scr.currentScreen.DOMObject.provideData[item.id] = item;
					}
				}

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

				const btnCreateNewAreaModal = scr.currentScreen.DOMObject.querySelector(".create-new-area-modal");
				if(!btnCreateNewAreaModal.classList.contains("inited")) {
					btnCreateNewAreaModal.classList.add("inited");
					
					btnCreateNewAreaModal?.addEventListener("click", e => {
						createNewAreaModal(sh_api).show();
					});
				}

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

export {
	areasTree
}