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

export function areaDetailsModal(area, sh_api) {
	console.log("areaDetailsModal", area);

	return Modals.create("area-details-modal", {
		title: `<i class="ph ph-map-trifold normalize"></i> ${area.display_name}`,
		body: modal => {
			return `
				<div class="place-in-area-container"></div>
			`;
		},
		actions: modal => {
			const btnCancel = Helper.template.createElement("button", {
				class: "btn btn-primary"
			}, "Close");

			const btnRemove = Helper.template.createElement("button", {
				class: "btn btn-danger with-icon"
			}, `<i class="ph ph-trash"></i> Remove`);

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

			btnRemove.addEventListener("click", e => {
				Helper.states.btnLoadingState(btnRemove, true);

				confirmPopup(
					`Are you sure you want to remove this area? <b>${area.display_name}</b>`, 
					() => {
						sh_api.areas.remove(
							area.id,
							(err, data, meta) => {
								
								Helper.states.btnLoadingState(btnRemove, false);
								console.log("Was removed");

								modal.close();
								Screens.reinit();

								setTimeout(() => {
									Toasts.createSuccess(
										"Removed",
										`Area: ${area.display_name}`
									).show();
								}, 300);
							}
						);
				}, 
				() => {
					Helper.states.btnLoadingState(btnRemove, false);
					console.log("CANCELED");
				});
			});

			return [ btnCancel, btnRemove ];
		},
		onready: modal => {
			placeInArea(
				sh_api,
				modal.querySelector(".place-in-area-container"),
				"area",
				area.id,
				area.parent_id
			);
		}
	});
}