lib_plankton.zoo_page.register(
	"register",
	async (parameters, target_element) => {
		function set_state(
			state : ("load" | "fill" | "wait" | "done"),
			messages : Array<string> = []
		) : void
		{
			target_element.querySelector(".register").setAttribute("rel", state);
			target_element.querySelector(".register-message").textContent = "";
			let dom_list = document.createElement("ul");
			messages.forEach(
				message => {
					let dom_message = document.createElement("li");
					dom_message.textContent = message;
					dom_list.appendChild(dom_message);
				}
			);
			target_element.querySelector(".register-message").appendChild(dom_list);
		}
		
		const id : int = parseInt(parameters["id"]);
		const verification : string = parameters["verification"];
		// const verification : string = (new URLSearchParams(location.search)).get("verification");
		
		update_nav({"mode": null});
		
		const member_data : {
			name_real_value : string;
			name_real_index : int;
			name_login : string;
			email_address_veiled : string;
			email_address_nominal : string;
		} = await _espe.backend.member_info(id, verification);
		
		target_element.appendChild(template_request("register"));
		
		set_state("load");
		
		// info
		{
		}
		// form
		{
			let input : lib_plankton.zoo_input.interface_input<
				{
					email_address : ("none" | "only_veiled" | "both");
					email_redirect : boolean;
					password_value : string;
					password_confirmation : string;
				}
			>;
			// input
			{
				input = new lib_plankton.zoo_input.class_input_group(
					[
						{
							"name": "email_address",
							"input": new lib_plankton.zoo_input.class_input_enumeration(
								[
									{"value": "none", "label": "keine"},
									{"value": "only_veiled", "label": "nur pseudonymisiert"},
									{"value": "both", "label": "pseudonymisiert und namentlich"},
								]
							),
							"label": "Partei-E-Mail-Adresse einrichten",
							"help": (
								[
									"Für Partei-Angelegenheiten möchten wir dir anbieten gesonderte E-Mail-Adressen zu verwenden.",
									lib_plankton.string.coin(
										"Deine namentliche E-Mail-Adresse würde lauten »{{email_address_nominal}}« und die pseudonymisierte »{{email_address_veiled}}«.",
										{
											"email_address_veiled": member_data.email_address_veiled,
											"email_address_nominal": member_data.email_address_nominal,
										}
									),
									"Die Partei-E-Mail-Adressen können zum Empfangen von E-Mails verwendet werden. Falls es nötig werden sollte, dass du auch E-Mails mit über die Partei-Adresse verschicken kannst, wende dich bitte an den/die Mitgliederbeauftragte:n!",
								]
								.join("\n\n")
							)
						},
						{
							"name": "email_redirect",
							"input": new lib_plankton.zoo_input.class_input_checkbox(
							),
							"label": "eingehende E-Mails an private Adresse leiten",
						},
						{
							"name": "password_value",
							"input": new lib_plankton.zoo_input.class_input_password(
							),
							"label": "Passwort für Netz-Dienste",
							"help": "Das Passwort für die Anmeldung bei den Netz-Diensten.\n\nDu solltest dir merken oder geeignet abspeichern, was du hier einträgst.\n\nSolltest du dieses Passwort mal vergessen oder verlieren, hast du die Möglichkeit ein neues zu setzen.",
						},
						{
							"name": "password_confirmation",
							"input": new lib_plankton.zoo_input.class_input_password(
							),
							"label": "Passwort wiederholen",
						},
					]
				);
				await input.setup(target_element.querySelector(".register-form-input") as HTMLElement);
				await input.write(
					{
						"email_address": "both",
						"email_redirect": true,
						"password_value": "",
						"password_confirmation": "",
					}
				);
			}
			// actions
			{
				target_element.querySelector(".register-form-action-send").addEventListener(
					"click",
					async (event) => {
						const value : {
							email_address : ("none" | "only_veiled" | "both");
							email_redirect : boolean;
							password_value : string;
							password_confirmation : string;
						} = await input.read();
						if (value.password_value !== value.password_confirmation) {
							set_state("fill", ["Die Passwörter stimmen nicht überein"]);
						}
						else {
							set_state("wait");
							let flaws : Array<{incident : string; details : Record<string, any>;}>;
							try {
								flaws = await _espe.backend.member_register(
									id,
									verification,
									{
										"email_use_veiled_address": (value.email_address !== "none"),
										"email_use_nominal_address": (value.email_address === "both"),
										"email_redirect_to_private_address": value.email_redirect,
										"password": value.password_value,
									}
								);
							}
							catch (error) {
								flaws = [
									{"incident": "unhandled_error", "details": {}},
								];
							}
							if (flaws.length > 0) {
								set_state(
									"fill",
									flaws.map(
										flaw => lib_plankton.string.coin(
											"{{incident}} | {{details}}",
											{
												"incident": flaw.incident,
												"details": JSON.stringify(flaw.details),
											}
										)
									)
								);
							}
							else {
								set_state("done", ["Danke!"]);
							}
						}
					}
				);
			}
		}
	},
);