package ui

import (
	"fmt"

	"github.com/ryanhamamura/via/h"
)

type C4ChatMessage struct {
	Nickname string `json:"nickname"`
	Color    int    `json:"color"` // 1=Red, 2=Yellow
	Message  string `json:"message"`
	Time     int64  `json:"time"`
}

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

func C4Chat(messages []C4ChatMessage, msgBind, sendClick, sendKeyDown h.H) h.H {
	var msgEls []h.H
	for _, m := range messages {
		color := "#666"
		if c, ok := c4ChatColors[m.Color]; ok {
			color = c
		}
		msgEls = append(msgEls, h.Div(h.Class("c4-chat-msg"),
			h.Span(
				h.Attr("style", fmt.Sprintf("color:%s;font-weight:bold;", color)),
				h.Text(m.Nickname+": "),
			),
			h.Span(h.Text(m.Message)),
		))
	}

	autoScroll := h.Script(h.Text(`
(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});
})();
`))

	historyAttrs := []h.H{h.Class("c4-chat-history")}
	historyAttrs = append(historyAttrs, msgEls...)
	historyAttrs = append(historyAttrs, autoScroll)

	return h.Div(h.Class("c4-chat"),
		h.Div(historyAttrs...),
		h.Div(h.Class("c4-chat-input"),
			h.Input(
				h.Type("text"),
				h.Attr("placeholder", "Chat..."),
				h.Attr("autocomplete", "off"),
				msgBind,
				sendKeyDown,
			),
			h.Button(h.Type("button"), h.Text("Send"), sendClick),
		),
	)
}