package site

import (
	goaway "github.com/TwiN/go-away"
	datastar "github.com/starfederation/datastar/sdk/go"
)

type ClickToEditContactSignals struct {
	FirstName string `json:"firstName,omitempty" san:"trim,xss,max=128"`
	LastName  string `json:"lastName,omitempty" san:"trim,xss,max=128"`
	Email     string `json:"email,omitempty" san:"trim,xss,max=128"`
}

templ setupExamplesClickToEditUserComponent(signals *ClickToEditContactSignals) {
	<div id="contact_1" class="flex flex-col max-w-sm gap-2">
		<label>First Name: { goaway.Censor(signals.FirstName) }</label>
		<label>Last Name: { goaway.Censor(signals.LastName) }</label>
		<label>Email: { goaway.Censor(signals.Email) }</label>
		<div class="flex gap-4">
			<button
				class="btn btn-primary"
				data-on-click={ datastar.GetSSE("/examples/click_to_edit/contact/1/edit") }
			>
				Edit
			</button>
			<button
				class="btn btn-secondary"
				data-on-click={ datastar.PatchSSE("/examples/click_to_edit/contact/1/reset") }
			>
				Reset
			</button>
		</div>
	</div>
}

templ setupExamplesClickToEditUserEdit(signals *ClickToEditContactSignals) {
	<div id="contact_1" class="flex flex-col gap-2" data-signals={ templ.JSONString(signals) }>
		<label class="flex items-center gap-2 input input-bordered">
			First Name
			<input type="text" class="grow" data-bind="firstName"/>
		</label>
		<label class="flex items-center gap-2 input input-bordered">
			Last Name
			<input type="text" class="grow" data-bind="lastName"/>
		</label>
		<label class="flex items-center gap-2 input input-bordered">
			Email
			<input type="text" class="grow" data-bind="email"/>
		</label>
		<div class="flex gap-4">
			<button
				class="btn btn-primary"
				data-on-click={ datastar.PutSSE("/examples/click_to_edit/contact/1") }
			>
				Save
			</button>
			<button
				class="btn btn-secondary"
				data-on-click={ datastar.GetSSE("/examples/click_to_edit/contact/1") }
			>
				Cancel
			</button>
		</div>
	</div>
}