export function createNewAreaModal(sh_api) {
	console.log("createNewAreaModal");

	return Modals.create("create-area-modal", {
		title: `<i class="ph ph-plus normalize"></i> Create new Area`,
		body: modal => {
			return `
				<div class="create-area-form">
					<div class="block form-group">
						<label class="label">
							Type
							<input type="text" class="input" name="type" placeholder="Input Area Type">
						</label>
					</div>

					<div class="block form-group">
						<label class="label">
							Alias
							<i class="ph ph-link-simple-break"></i>
							<input type="text" class="input" name="alias" placeholder="Input Area Alias">
						</label>
					</div>

					<div class="block form-group">
						<label class="label">
							Display Name
							<i class="ph ph-tag"></i>
							<input type="text" class="input" name="display_name" placeholder="Input Display Name">
						</label>
					</div>

					<div class="alert-container"></div>
				</div>
			`;
		},
		actions: modal => {
			const btnCancel = Helper.template.createElement("button", {
				class: "btn btn-primary"
			}, "Close");

			const btnSubmit = Helper.template.createElement("button", {
				class: "btn btn-success with-icon"
			}, `<i class="ph ph-plus"></i> Create`);

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

			btnSubmit.addEventListener("click", e => {
				const form = modal.querySelector(".create-area-form");
				form.querySelectorAll("input[type='text']").forEach(i => {
					i.dispatchEvent(
						new Event("input", { bubbles: true })
					);
				});

				if(form.querySelectorAll(".label.error").length) {
					return false;
				}

				const inputElements = form.querySelectorAll("input");

				const inputs = {};
				for(let input of inputElements) {
					inputs[input.getAttribute("name")] = input.value;
				}

				Helper.states.btnLoadingState(btnSubmit, true);

				sh_api.areas.new_area(inputs, (err, resp, meta) => {
					Helper.states.btnLoadingState(btnSubmit, false);

					if(err?.type == "api_error") {
						console.error("ERR! sh_api.areas.new_area", err.raw);

						if(err.raw?.failed_fields) {
							for(let errFieldName of err.raw.failed_fields) {
								modal.querySelector(`[name="${errFieldName}"]`).parentNode.classList.add("error");
							}
						}						

						if(err.raw?.msg) {
							const alertContainer = modal.querySelector(".alert-container");
							alertContainer.innerHTML = "";
							alertContainer?.append(Helper.template.createAlert( "error", err.raw.msg ));
						}

						return false;
					}					

					if(!resp) {
						return false;
					}

					inputElements.forEach(i => i.value = "");
					modal.close();

					Screens.reinit();

					setTimeout(() => {
						Toasts.createSuccess("Creating successful", `Added new area <b>ID ${inputs.alias}</b>`).show();
					}, 300);

				});
			});

			return [ btnCancel, btnSubmit ];
		},
		onready: modal => {
			const form = modal.querySelector(".create-area-form");
			form.querySelectorAll(".input").forEach(i => {

				i.addEventListener("input", e => {
					if(!e.currentTarget.value.length) {
						e.currentTarget.parentNode.classList.add("error");
						if(!e.currentTarget.parentNode.parentNode.querySelector(".input-info.error")) {
							e.currentTarget.parentNode.parentNode.append(Helper.template.createElement("div", {
								class: "input-info error"
							}, `<i class="ph ph-warning-circle"></i> Field cannot be empty`));
						}
					} else {
						e.currentTarget.parentNode.classList.remove("error");
						e.currentTarget.parentNode.parentNode.querySelector(".input-info.error")?.remove();
					}
				});

			});
		}
	});
}