package site

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

type ScrollIntoViewSignals struct {
	Behavior string `json:"behavior"`
	Block    string `json:"block"`
	Inline   string `json:"inline"`
}

type ScrollIntoViewOption struct {
	Label  string
	Values []string
}

templ scrollIntoViewView(paragraphs []string, opts []ScrollIntoViewOption, signals *ScrollIntoViewSignals) {
	<div id="replaceMe" data-signals={ templ.JSONString(signals) }>
		<div class="flex flex-col gap-4">
			<div class="flex flex-wrap gap-8 justify-center">
				for _, o := range opts {
					<div class="flex flex-col gap-2">
						<h3>{ o.Label }</h3>
						<select
							id={ o.Label }
							class="select select-bordered"
							data-bind={ o.Label }
						>
							for _, v := range o.Values {
								<option value={ v }>{ v }</option>
							}
						</select>
					</div>
				}
			</div>
			<button
				id="scrollIntoViewButton"
				class="btn btn-accent"
				data-on-click={ datastar.PutSSE("/examples/scroll_into_view/data") }
			>Scroll into view</button>
		</div>
		{{ middle := len(paragraphs) / 2 }}
		for i, p := range paragraphs {
			{{
				isMiddle := i == middle
				id := fmt.Sprintf("p%d", +i)
			}}
			if isMiddle {
				<blockquote id={ id }>{ p }</blockquote>
			} else {
				<p id={ id }>{ p }</p>
			}
			if isMiddle {
				<a href="#replaceMe">Back to top</a>
			}
		}
	</div>
}