package pages

import (
	"git.grosinger.net/tgrosinger/saasitone/templ/components"
	"git.grosinger.net/tgrosinger/saasitone/pkg/form"
	"git.grosinger.net/tgrosinger/saasitone/pkg/page"
)

type ContactForm struct {
	Email      string `form:"email" validate:"required,email"`
	Department string `form:"department" validate:"required,oneof=sales marketing hr"`
	Message    string `form:"message" validate:"required"`
	form.Submission
}

templ Contact(p page.Page, f *ContactForm) {
	if p.HTMX.Request.Target != "contact" {
		<article class="message is-link">
			<div class="message-body">
				<p>This is an example of a form with inline, server-side validation and HTMX-powered AJAX submissions without writing a single line of JavaScript.</p>
				<p>Only the form below will update async upon submission.</p>
			</div>
		</article>
	}
	if f.IsDone() {
		<article class="message is-large is-success">
			<div class="message-header">
				<p>Thank you!</p>
			</div>
			<div class="message-body">
				No email was actually sent but this entire operation was handled server-side and degrades without JavaScript enabled.
			</div>
		</article>
	} else {
		<form id="contact" method="post" hx-post={ p.ToURL("contact.submit") }>
			<div class="field">
				<label for="email" class="label">Email address</label>
				<div class="control">
					<input id="email" name="email" type="email" class={ "input", f.Submission.GetFieldStatusClass("Email") } value={ f.Email }/>
				</div>
				@components.FieldErrors(f.Submission.GetFieldErrors("Email"))
			</div>
			<div class="control">
				<label class="label">Department</label>
				<label class="radio">
					<input type="radio" name="department" value="sales" checked?={ f.Department == "sales" }/>
					Sales
				</label>
				<label class="radio">
					<input type="radio" name="department" value="marketing" checked?={ f.Department == "marketing" }/>
					Marketing
				</label>
				<label class="radio">
					<input type="radio" name="department" value="hr" checked?={ f.Department == "hr" }/>
					HR
				</label>
				@components.FieldErrors(f.Submission.GetFieldErrors("Department"))
			</div>
			<div class="field">
				<label for="message" class="label">Message</label>
				<div class="control">
					<textarea id="message" name="message" class={ "textarea", f.Submission.GetFieldStatusClass("Message") }>{ f.Message }</textarea>
				</div>
				@components.FieldErrors(f.Submission.GetFieldErrors("Message"))
			</div>
			<div class="field is-grouped">
				<div class="control">
					<button class="button is-link">Submit</button>
				</div>
			</div>
			@components.CSRF(p.CSRF)
		</form>
	}
}