package authview

templ RegisterFormForm(username string) {
	<form
		hx-post="/register"
		hx-swap="none"
		x-data={ templ.JSFuncCall("registerFormData").CallInline }
		@submit="handleSubmit()"
		@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful) { isSubmitting=false; buttontext='Register'; if($event.detail.xhr.status === 409) { errorMessage='Username is already taken'; isUnique=false; } else { errorMessage='An error occurred. Please try again.'; } }"
	>
		<script>
			function registerFormData() {
				return {
					canSubmit: false,
					buttontext: "Register",
					errorMessage: "",
					isChecking: false,
					isUnique: false,
					isEmpty: true,
					isSubmitting: false,
					submitTimeout: null,
					resetErr() {
						this.errorMessage = "";
						this.isChecking = false;
						this.isUnique = false;
					},
					enableSubmit() {
						this.canSubmit = true;
					},
					handleSubmit() {
						this.isSubmitting = true;
						this.buttontext = "Loading...";
						// Set timeout for 10 seconds
						this.submitTimeout = setTimeout(() => {
							this.isSubmitting = false;
							this.buttontext = "Register";
							this.errorMessage = "Request timed out. Please try again.";
						}, 10000);
					},
				};
			}
		</script>
		<div
			class="grid gap-y-4"
		>
			<div>
				<div class="relative">
					<input
						type="text"
						id="username"
						name="username"
						x-bind:class="{
						'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
						'border-overlay0 focus:border-blue': !isUnique && !errorMessage,
						'border-green focus:border-green': isUnique && !isChecking && !errorMessage,
						'border-red focus:border-red': errorMessage && !isChecking && !isSubmitting
					}"
						required
						aria-describedby="username-error"
						value={ username }
						@input="resetErr(); isEmpty = $el.value.trim() === ''; if(isEmpty) { errorMessage='Username is required'; isUnique=false; }"
						hx-post="/htmx/isusernameunique"
						hx-trigger="input changed delay:500ms"
						hx-swap="none"
						@htmx:before-request="if($el.value.trim() === '') { isEmpty=true; return; } isEmpty=false; isChecking=true; isUnique=false; errorMessage=''"
						@htmx:after-request="isChecking=false; if($event.detail.successful) { isUnique=true; canSubmit=true; } else if($event.detail.xhr.status === 409) { errorMessage='Username is already taken'; isUnique=false; canSubmit=false; }"
					/>
					<p
						class="text-center text-xs text-red mt-2"
						id="username-error"
						x-show="errorMessage && !isSubmitting"
						x-cloak
						x-text="errorMessage"
					></p>
				</div>
			</div>
			<button
				x-bind:disabled="isEmpty || !isUnique || isChecking || isSubmitting"
				x-text="buttontext"
				type="submit"
				class="w-full py-3 px-4 inline-flex justify-center items-center 
                    gap-x-2 rounded-lg border border-transparent transition
                    bg-green hover:bg-green/75 text-mantle hover:cursor-pointer
                    disabled:bg-green/60 disabled:cursor-default"
			></button>
		</div>
	</form>
}