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

function renderFavoritesList(scr, allAreas) {
	const favIds = FavoritesStore.getAll();
	const favAreas = allAreas.filter(a => favIds.includes(String(a.id)));
	const container = scr.currentScreen.DOMObject.querySelector(".main-container .favorites-container");

	if (favAreas.length === 0) {
		container.innerHTML = Helper.template.emptyHereHTML();
		return;
	}

	let html = `<div class="tree">`;
	for (const area of favAreas) {
		html += `
			<div class="branch lvl-0 is-single" data-area-id="${area.id}">
				<div class="branch-container">
					<div class="branch-info">
						<span class="title"><i class="ph ph-map-trifold normalize"></i> ${area.display_name}</span>
						[
						<span class="text-muted area-type">${area.type}</span>
						<span><i class="ph ph-link-simple-break normalize"></i> ${area.alias}</span>
						]
					</div>
					<div class="row g-4">
						<button class="btn btn-accent btn-small with-icon actions"
							data-area-id="${area.id}"
							data-area-name="${area.display_name}"
						><i class="ph ph-brackets-curly"></i> Actions</button>
						<button class="btn btn-accent btn-small with-icon devices"
							data-area-id="${area.id}"
							data-area-name="${area.display_name}"
						><i class="ph ph-cpu"></i> Devices</button>
						<button class="btn-icon without-hover unstar"
							data-area-id="${area.id}"
							title="Remove from favorites"
						><i class="ph ph-star-fill"></i></button>
					</div>
				</div>
			</div>
		`;
	}
	html += `</div>`;

	container.innerHTML = html;
}

function initFavoritesList(scr, sh_api, allAreas) {
	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("button.unstar").forEach(btn => {
		btn.addEventListener("click", e => {
			FavoritesStore.remove(e.currentTarget.dataset.areaId);
			renderFavoritesList(scr, allAreas);
			initFavoritesList(scr, sh_api, allAreas);
		});
	});
}

function areasFavorites(sh_api) {
	return {
		title: "Favorites",
		alias: "areas-favorites",
		renderer: () => {
			return Helper.template.mainTemplate(
				sidebarTemplate("areas-favorites"),
				`<div class="top-bar">
					<div class="row g-4">
						<div class="col">
							<h3 class="title"><i class="ph ph-star normalize"></i> Favorites</h3>
						</div>
					</div>
				</div>
				<div class="mt-6 favorites-container"></div>
				`
			);
		},
		initer: scr => {
			sh_api.areas.list((err, resp, meta) => {
				if (meta.status_code != 200) {
					return scr.error("Server API ERROR", "");
				}

				const allAreas = resp.data?.areas ?? [];

				scr.currentScreen.DOMObject.provideData = {};
				for (const item of allAreas) {
					scr.currentScreen.DOMObject.provideData[item.id] = item;
				}

				renderFavoritesList(scr, allAreas);
				initFavoritesList(scr, sh_api, allAreas);

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

export { areasFavorites };