package site

import datastar "github.com/starfederation/datastar/sdk/go"

type ValueSelectSignals struct {
	Make  string `json:"make"`
	Model string `json:"model"`
}

type ValueSelectMake struct {
	ID     string              `json:"id"`
	Label  string              `json:"label"`
	Models []*ValueSelectModel `json:"models"`
}

type ValueSelectModel struct {
	ID    string `json:"id"`
	Label string `json:"label"`
}

templ valueSelectView(cars []*ValueSelectMake, signals *ValueSelectSignals, make *ValueSelectMake, model *ValueSelectModel, isValid bool) {
	<div
		id="value_select"
		class="flex flex-col gap-2"
		data-signals={ templ.JSONString(signals) }
	>
		<div class="text-2xl font-bold">Pick a Make / Model</div>
		<select
			class="select select-bordered"
			data-bind-make
			data-on-change={ datastar.GetSSE("/examples/value_select/data") }
			data-testid="make_select"
		>
			<option disabled selected>Select a Make</option>
			for _, make := range cars {
				<option value={ make.ID } data-testid={ "make_option_" + make.Label }>{ make.Label }</option>
			}
		</select>
		if make != nil {
			<select
				class="select select-bordered"
				data-bind-model
				data-on-change={ datastar.GetSSE("/examples/value_select/data") }
				data-testid="model_select"
			>
				<option disabled selected>Select a Model</option>
				for _, model := range make.Models {
					<option value={ model.ID } data-testid={ "model_option_" + model.Label }>{ model.Label }</option>
				}
			</select>
		}
		if isValid {
			<button
				class="btn btn-success"
				data-on-click={ datastar.PostSSE("/examples/value_select/data") }
				data-testid="select_button"
			>
				@icon("material-symbols:car-repair")
				Submit selected { make.Label } / { model.Label } choice
			</button>
		}
	</div>
}

templ valueSelectResults(make *ValueSelectMake, model *ValueSelectModel) {
	<div id="value_select">
		<div class="card">
			<div class="card-body">
				<div class="card-title">You selected</div>
				<div>Make "{ make.Label }" db id:{ make.ID }</div>
				<div>Model "{ model.Label }" db id:{ model.ID }</div>
			</div>
		</div>
		<button
			class="btn btn-warning"
			data-on-click={ datastar.GetSSE("/examples/value_select/data") }
		>
			@icon("material-symbols:reset-wrench")
			Resest form
		</button>
	</div>
}