package form

templ RegisterForm(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="load delay:100ms, 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>
}