package components

import (
	"fmt"

	"github.com/starfederation/datastar-go/datastar"
)

type ChatMessage struct {
	Nickname string `json:"nickname"`
	Color    int    `json:"color"`
	Message  string `json:"message"`
	Time     int64  `json:"time"`
}

var chatColors = map[int]string{
	1: "#4a2a3a",
	2: "#2a4545",
}

templ Chat(messages []ChatMessage, gameID string) {
	<div id="c4-chat" class="c4-chat">
		<div class="c4-chat-history">
			for _, m := range messages {
				<div class="c4-chat-msg">
					<span style={ fmt.Sprintf("color:%s;font-weight:bold;", chatColor(m.Color)) }>
						{ m.Nickname }:&nbsp;
					</span>
					<span>{ m.Message }</span>
				</div>
			}
			@chatAutoScroll()
		</div>
		<div class="c4-chat-input" data-morph-ignore>
			<input
				type="text"
				placeholder="Chat..."
				autocomplete="off"
				data-bind="chatMsg"
				data-on:keydown.enter={ datastar.PostSSE("/games/%s/chat", gameID) }
			/>
			<button
				type="button"
				data-on:click={ datastar.PostSSE("/games/%s/chat", gameID) }
			>
				Send
			</button>
		</div>
	</div>
}

templ chatAutoScroll() {
	<script>
	(function(){
		var el = document.querySelector('.c4-chat-history');
		if (!el) return;
		el.scrollTop = el.scrollHeight;
		new MutationObserver(function(){ el.scrollTop = el.scrollHeight; })
			.observe(el, {childList:true, subtree:true});
	})();
	</script>
}

func chatColor(color int) string {
	if c, ok := chatColors[color]; ok {
		return c
	}
	return "#666"
}