package site

import (
	"fmt"
	datastar "github.com/starfederation/datastar/sdk/go"
)

type inlineValidationUser struct {
	FirstName string `json:"firstName"`
	LastName  string `json:"lastName"`
	Email     string `json:"email"`
}

templ inlineValidationFieldComponent(label, field string, isValid bool, isNotValidErrorLabelFmt string, labelArgs ...any) {
	<div class="form-control">
		<label class="label">
			<span class="label-text">{ label }</span>
		</label>
		<input
			class={ "input input-bordered", templ.KV("input-error",!isValid) }
			data-bind={ field }
			data-on-keydown__debounce.500ms={ datastar.GetSSE("/examples/inline_validation/data") }
			data-testid={ "input_" + field }
		/>
		if !isValid {
			<label class="text-sm font-bold text-error" data-testid={ "validation_" + field }>{ fmt.Sprintf( isNotValidErrorLabelFmt, labelArgs...) }</label>
		}
	</div>
}

templ inlineValidationUserComponent(u *inlineValidationUser, isEmailValid, isFirstNameValid, isLastNameValid, isValid bool) {
	<div
		id="inline_validation"
		class="flex flex-col gap-4"
		data-signals__ifmissing={ templ.JSONString(u) }
	>
		<div class="text-2xl font-bold">Sign Up</div>
		<div>
			@inlineValidationFieldComponent("Email Address", "email", isEmailValid, "Email '%s' is already taken or is invalid.  Please enter another email.", u.Email)
			@inlineValidationFieldComponent("First Name", "firstName", isFirstNameValid, "First name must be at least 2 characters.")
			@inlineValidationFieldComponent("Last Name", "lastName", isLastNameValid, "Last name must be at least 2 characters.")
		</div>
		<button
			class="btn btn-success"
			disabled?={ !isValid }
			data-on-click={ datastar.PostSSE("/examples/inline_validation/data") }
			data-testid="submit_button"
		>
			@icon("material-symbols:person-add")
			Add User
		</button>
		<div class="divider"></div>
	</div>
}

templ inlineValidationThankYou() {
	<div id="inline_validation" class="alert alert-success">
		@icon("material-symbols:check-circle")
		Thank you for signing up!
	</div>
}