let selector, container, loadedAreas, currentParentAreaId, sh_api, type;
const typeMap = {
	area: "areas",
	device: "devices",
	action: "scripts"
};

function setServerCurrentSelectedAreaName() {
	const currentAreaDisplayContainer = selector.querySelector(".current-area");

	for(let area of loadedAreas) {
		if(area.id == currentParentAreaId) {
			return currentAreaDisplayContainer.innerHTML = `${area.display_name}`;
		}
	}

	currentAreaDisplayContainer.innerHTML = `Area ID ${currentParentAreaId}`;

	autoDisplayingRmParentIdBtn();
}

function removeParentAreaId(targetId) {
	sh_api[typeMap[type]].unassign_from_area(targetId, (err, resp, meta) => {
		console.log("sh_api[typeMap[type]].unassign_from_area", err, resp, meta);

		if(!resp || resp.data.status) {
			return Toasts.createError(
				`Error of unassigning`,
				(!resp) ? `Error of request` : resp.data.error_alias
			).show();
		}

		currentParentAreaId = 0;
		setServerCurrentSelectedAreaName();
		hidePlaceInAreaSelector();

		Toasts.createSuccess(
			`Successfully unassigning`,
			`Successfully unassigning`
		).show();
	});
}

function placeInAreaRequest(sh_api, payload) {
	sh_api[typeMap[type]].place_in_area(
		payload, 
		(err, resp, meta) => {
			console.log("sh_api.areas.place_in_area", err, resp, meta);

			if(!resp) {
				return console.error("Component placeInArea", err, resp, meta);
			}

			if(!resp.status) {
				return console.error("Component placeInArea", err, resp, meta);
			}

			const currentAreaDisplayContainer = selector.querySelector(".current-area");

			Toasts.createSuccess(
				`Successfully applied`,
				`Successfully applied`
			).show();

			currentParentAreaId = payload.place_in_area_id;
			setServerCurrentSelectedAreaName();
			hidePlaceInAreaSelector();

			console.log("Success", resp);
		}
	);
}

function loadAreasList(targetId, changePlaceCb) {
	sh_api.areas.list((err, resp, meta) => {
		console.log("sh_api.areas.list", err, resp, meta);

		if(!resp) {
			console.error("sh_api.areas.list", err);

			return Toasts.createError(
				`Loading error`,
				`Error loading areas list`
			).show();
		}

		loadedAreas = resp.data.areas;

		setServerCurrentSelectedAreaName();

		const areas = {};
		for(let item of resp.data.areas) {
			if(item.id == targetId) {
				continue;
			}

			areas[item.id] = item.display_name;
		}

		const advs = advancedSelect(
			selector.querySelector(".select-area"),
			areas, 
			"Nothing found"
		);
		selector.querySelector(".advanced-select-container").append(advs);			

		advs.advancedSelect.addEventListener("changed", self => {
			changePlaceCb(self, resp.data.areas);
		});

		container.innerHTML = "";
		container.append(selector);
	});
}

function hidePlaceInAreaSelector() {
	const formContainer = selector.querySelector(".form-container");
	formContainer.classList.remove("a-show");
	formContainer.classList.add("a-hide");
	setTimeout(() => formContainer.classList.remove("a-hide"), 300);
}

function autoDisplayingRmParentIdBtn() {
	const btn = selector.querySelector(".remove-parent-id");
	if(currentParentAreaId == 0) {
		btn.classList.add("d-none");
	} else {
		btn.classList.remove("d-none");
	}
}

/**
 * Поместить девайс, экшн или area в другой area
 * @param  {[type]} sh_api 
 * @param  {[type]} container Сюда мы поместим ui для выбора area
 * @param  {string} type area | device | action
 * @param  {int} targetId ID цели, которую будем помещать в area
 */
export function placeInArea(_sh_api, _container, _type, targetId, _currentParentAreaId) {
	sh_api = _sh_api;
	container = _container;
	currentParentAreaId = _currentParentAreaId;
	type = _type;

	selector = document.createElement("div");
	selector.classList.add("component");
	selector.classList.add("place-in-area-component");
	selector.innerHTML = `
		<span class="current-area"></span>
		<button class="btn-icon without-hover remove-parent-id"><i class="ph ph-backspace"></i></button>
		<button class="btn btn-primary with-icon show-place-in-area">
			<i class="ph ph-map-pin-line"></i>
			Place In Area
		</button>
		<div class="block form-group form-container">
			<button class="btn-icon hide-place-in-area">
				<i class="ph ph-x"></i>
			</button>
			<label class="label">
				Select Area
				<i class="ph ph-magnifying-glass"></i>
				<input type="text" class="input select-area" placeholder="Search">
			</label>
			<div class="advanced-select-container"></div>
		</div>
	`;
	
	loadAreasList(targetId, (advSelect, areasList) => {
		const value = advSelect.advancedSelect.value();
		if(!value.isOption) {
			return ;
		}

		const areaId = Object.keys(value.option)[0];
		const payload = { 
			target_id: targetId, 
			place_in_area_id: areaId 
		}

		placeInAreaRequest(sh_api, payload);
	});

	const formContainer = selector.querySelector(".form-container");

	selector.querySelector("button.show-place-in-area").addEventListener("click", e => {
		if(formContainer.classList.contains("a-show")) {
			formContainer.classList.remove("a-show");
			formContainer.classList.add("a-hide");
			setTimeout(() => formContainer.classList.remove("a-hide"), 300);
		} else {
			formContainer.classList.add("a-show");
		}
	});

	selector.querySelector("button.hide-place-in-area").addEventListener("click", e => {
		hidePlaceInAreaSelector();
	});

	selector.querySelector("button.remove-parent-id").addEventListener("click", e => {
		removeParentAreaId(targetId);
	});
}