package components

import (
	"fmt"

	"github.com/ryanhamamura/games/chat"
	"github.com/starfederation/datastar-go/datastar"
)

// ColorFunc resolves a player slot to a CSS color string.
type ColorFunc func(slot int) string

// Config holds the game-specific settings for rendering a chat component.
type Config struct {
	// CSSPrefix is used for element IDs and CSS classes (e.g. "c4" or "snake").
	CSSPrefix string
	// PostURL is the URL to POST chat messages to (e.g. "/games/{id}/chat").
	PostURL string
	// Color resolves a player slot to a CSS color string.
	Color ColorFunc
	// StopKeyPropagation adds data-on:keydown.stop="" to the input to prevent
	// key events from propagating (needed for snake to avoid steering while typing).
	StopKeyPropagation bool
}

templ Chat(messages []chat.Message, cfg Config) {
	<div id={ cfg.CSSPrefix + "-chat" } class={ cfg.CSSPrefix + "-chat" }>
		<div class={ cfg.CSSPrefix + "-chat-history" }>
			for _, m := range messages {
				<div class={ cfg.CSSPrefix + "-chat-msg" }>
					<span style={ fmt.Sprintf("color:%s;font-weight:bold;", cfg.Color(m.Slot)) }>
						{ m.Nickname + ": " }
					</span>
					<span>{ m.Message }</span>
				</div>
			}
		</div>
		<div class={ cfg.CSSPrefix + "-chat-input" } data-morph-ignore>
			if cfg.StopKeyPropagation {
				<input
					type="text"
					placeholder="Chat..."
					autocomplete="off"
					data-bind="chatMsg"
					data-on:keydown.stop=""
				data-on:keydown.key_enter={ datastar.PostSSE("%s", cfg.PostURL) }
			/>
		} else {
			<input
				type="text"
				placeholder="Chat..."
				autocomplete="off"
				data-bind="chatMsg"
				data-on:keydown.enter={ datastar.PostSSE("%s", cfg.PostURL) }
			/>
		}
		<button
			type="button"
			data-on:click={ datastar.PostSSE("%s", cfg.PostURL) }
			>
				Send
			</button>
		</div>
		@chatAutoScroll(cfg.CSSPrefix)
	</div>
}

script chatAutoScroll(cssPrefix string) {
	var el = document.querySelector('.' + cssPrefix + '-chat-history');
	if (!el) return;
	el.scrollTop = el.scrollHeight;
	new MutationObserver(function(){ el.scrollTop = el.scrollHeight; })
		.observe(el, {childList:true, subtree:true});
}