render_input.go

package form

import (
	"webtyp.com/dom"
	"webtyp.com/fmt"
	"webtyp.com/input"
	"webtyp.com/lang"
	"webtyp.com/widget"
)

// labelChars is the label's budget, calibrated against the --chip-width the
// form skin gives the chip. Truncate counts the three-byte ellipsis inside this
// number, so the visible text is labelChars-3 at most.
//
// The count is BYTES, not runes: an accented character costs two, and a cut can
// land mid-character. Field names are identifiers in practice, so this is
// tolerable here; a title with accents long enough to trip it belongs in the
// input's title, not its label.
const labelChars = 14

// fieldComponent wraps an input.Input to implement dom.Component.
type fieldComponent struct {
	input.Input
	value *dom.SignalString
	err   *dom.SignalString
	label string
	help  string
	// locked mirrors the owning Form's whole-form read-only gate (Form.SetLocked).
	// Shared across every field, so toggling it re-locks/unlocks the entire form.
	locked *dom.SignalBool
	// onCommit fires when the user finishes editing this field (blur for
	// text/textarea/datalist, change for select/radio) — the auto-save hook set
	// via Form.OnFieldChange. Nil when the form has none registered.
	onCommit func()
	// options holds the live choice nodes of a select, radio group or datalist,
	// so Form.SetOptions after render repaints them: the choices usually come
	// from a Caller whose answer arrives once the form is already on screen.
	// Nil until a choice control is built.
	options      *dom.SignalNodes
	buildOptions func() []*dom.Element
}

// bindOptions writes the choices as el's children and binds them to a fresh,
// empty signal that refreshOptions fills later. dom's idiom for seeded rows
// (see datatable): the serializer emits the static children, and the first
// Set replaces them wholesale in the live DOM.
func (fc *fieldComponent) bindOptions(el *dom.Element, build func() []*dom.Element) {
	for _, n := range build() {
		el.Child(n)
	}
	fc.buildOptions = build
	fc.options = dom.NewNodes()
	el.BindChildren(fc.options)
}

// refreshOptions repaints the choice nodes from Input.GetOptions(). A no-op
// before the control is built: the first render reads the options directly.
func (fc *fieldComponent) refreshOptions() {
	if fc.options != nil && fc.buildOptions != nil {
		fc.options.Set(fc.buildOptions())
	}
}

// isDisabledOrLocked combines the field's own static disabled flag with the
// form-wide locked signal — either one disables the rendered control.
func (fc *fieldComponent) isDisabledOrLocked() bool {
	return fc.Input.IsDisabled() || (fc.locked != nil && fc.locked.Get())
}

func (fc *fieldComponent) String() string {
	return fc.Render().String()
}

// GetID must differ from the input's own id. The framework injects a component's
// id onto its root element (here the field wrapper div); if that equalled the
// input's id, getElementById would resolve the wrapper instead of the input and
// the value binding would write to the div, leaving the input empty.
func (fc *fieldComponent) GetID() string {
	return fc.Input.GetID() + ".field"
}

func (fc *fieldComponent) SetID(id string) {
	fc.Input.SetID(id)
}

func (fc *fieldComponent) Children() []dom.Component {
	return nil
}

// Renderer is an optional capability for custom inputs that own their markup.
// The form still owns the field wrapper (the field wrapper div), the error span, and
// validation: the widget must call onInput with the new value on user input —
// the form updates the value signal and runs live validation. The value
// signal carries the initial value and programmatic updates (SetValues).
type Renderer interface {
	RenderInput(value *dom.SignalString, onInput func(string)) *dom.Element
}

func (fc *fieldComponent) validate(val string) {
	// Mirrors Form.Validate()'s own skip check (validate.go) — that one already
	// gates submission; this one gates the live per-keystroke error display.
	// Before this, a field with SetSkipValidation(true) still submitted fine
	// but showed a red error while typing, defeating the whole point of
	// skipping validation for a field that must not reveal its own format.
	if skipper, ok := fc.Input.(interface{ GetSkipValidation() bool }); ok && skipper.GetSkipValidation() {
		fc.err.Set("")
		return
	}
	if val == "" {
		if req, ok := fc.Input.(interface{ IsRequired() bool }); ok && !req.IsRequired() {
			fc.err.Set("")
			return
		}
	}
	if err := fc.Input.Validate(val); err != nil {
		fc.err.Set(err.Error())
	} else {
		fc.err.Set("")
	}
}

// labelText picks the human label for the field's chip: the title first, then
// the placeholder, then the raw field name as a last resort.
func (fc *fieldComponent) labelText() string {
	return lang.Translate(fc.label).String()
}

func (fc *fieldComponent) Render() *dom.Element {
	container := dom.NewElement("div").
		Class(widget.NameField.Root().String()).
		BindStateFunc(widget.Invalid, func() bool { return fc.err.Get() != "" }).
		BindStateFunc(widget.Locked, fc.isDisabledOrLocked)

	if spanner, ok := fc.Input.(interface{ IsFullWidth() bool }); ok && spanner.IsFullWidth() {
		container.SetState(widget.SpanFull)
	}

	var control *dom.Element
	var extra *dom.Element

	if r, ok := fc.Input.(Renderer); ok {
		control = r.RenderInput(fc.value, func(v string) {
			fc.value.Set(v)
			fc.validate(v)
		})
	} else {
		htmlName := fc.Input.HTMLName()
		switch htmlName {
		case "radio":
			control = fc.buildRadio()
		case "checkbox":
			control = fc.buildCheckbox()
		case "select":
			control = fc.buildSelect()
		case "datalist":
			control, extra = fc.buildDatalist()
		default:
			control, extra = fc.buildInput()
		}
	}

	// Field label. Rendered structurally for every titled field so a global form
	// skin (e.g. components/fieldset) can present it as a chip/legend; `for` ties
	// it to the input for click-to-focus. Form ships no styling for it — the look
	// is the consumer's skin.
	if lbl := fc.labelText(); lbl != "" && control != nil {
		container.Child(dom.NewElement("label").
			For(control).
			Class(widget.NameField.Class(widget.PartLabel).String()).
			Attr("title", lbl). // the untruncated text stays reachable
			Text(fmt.Convert(lbl).Truncate(labelChars).String()))
	}

	errSpan := dom.NewElement("span").
		ID(fc.Input.ErrorID()).
		Class(widget.NameField.Class(widget.PartError).String()).
		Attr("aria-live", "polite").
		BindText(fc.err)

	var helpEl *dom.Element
	if fc.help != "" {
		helpEl = dom.NewElement("small").
			Class(widget.NameField.Class(widget.PartHelp).String()).
			Text(lang.Translate(fc.help).String())
		container.Child(helpEl)
	}

	if control != nil {
		if helpEl != nil {
			control.DescribedBy(helpEl, errSpan)
		} else {
			control.DescribedBy(errSpan)
		}
		container.Child(control)
	}
	if extra != nil {
		container.Child(extra)
	}

	container.Child(errSpan)
	return container
}

func (fc *fieldComponent) buildInput() (*dom.Element, *dom.Element) {
	tag := "input"
	htmlName := fc.Input.HTMLName()
	if htmlName == "textarea" {
		tag = "textarea"
	}

	el := dom.NewElement(tag).
		ID(fc.Input.GetID()).
		Class(widget.NameField.Class(widget.PartInput).String()).
		Attr("name", fc.Input.FieldName())

	if htmlName == "textarea" {
		el.Class(widget.NameField.Class(widget.PartTextarea).String())
		el.Attr("rows", "3")
	}

	var reveal *dom.Element
	if tag == "input" {
		masker, isMasked := fc.Input.(interface{ IsMasked() bool })
		if isMasked && masker.IsMasked() {
			reveal = fc.wireMaskToggle(el)
		} else {
			el.Attr("type", htmlName)
		}
	}

	// Initial value for SSR
	val := fc.value.Get()
	if val != "" {
		if htmlName == "textarea" {
			el.Text(val)
		} else {
			el.Attr("value", val)
		}
	}

	// Two-way binding
	el.Bind(fc.value)
	el.OnInput(func(e dom.Event) {
		val := e.TargetValue()
		fc.value.Set(val)
		fc.validate(val)
	})
	if fc.onCommit != nil {
		el.OnBlur(func(dom.Event) { fc.onCommit() })
	}

	applyCommonAttrs(el, fc)
	return el, reveal
}

// wireMaskToggle binds el's type attribute to a revealed/hidden signal
// (instead of the fixed "password" a masked field would otherwise get) and
// returns the button that flips it — the show/hide toggle NIST SP 800-63B
// §5.1.1.2 recommends, on by default for every masked field (see
// docs/PLAN.md in veltylabs/mjosefa-cms for why this replaced an app-local
// button built with syscall/js and a class no stylesheet defined).
func (fc *fieldComponent) wireMaskToggle(el *dom.Element) *dom.Element {
	revealed := dom.NewBool(false)
	el.BindAttrFunc("type", func() string {
		if revealed.Get() {
			return "text"
		}
		return "password"
	})
	return dom.NewElement("button").
		Attr("type", "button"). // never submit — revealing must not send the form
		ID(fc.Input.GetID()+".reveal").
		Class(widget.NameField.Class(widget.PartReveal).String()).
		BindState(widget.Selected, revealed).
		BindAttrFunc("aria-label", func() string {
			if revealed.Get() {
				return "Ocultar"
			}
			return "Mostrar"
		}).
		BindAttrFunc("aria-pressed", func() string {
			if revealed.Get() {
				return "true"
			}
			return "false"
		}).
		OnClick(func(dom.Event) { revealed.Set(!revealed.Get()) }).
		Child(eyeGlyph())
}

// eyeGlyph is a real inline SVG (fill="currentColor", so components/fieldset's
// Glyph() colors it through the cascade like any other text) — never an emoji:
// a "👁" renders a different bitmap per OS/font and ignores color entirely.
// One shape for both states; components/fieldset's When(Selected, …) is what
// changes how it reads as revealed vs hidden, not a second icon to keep in
// sync.
func eyeGlyph() *dom.Element {
	return dom.NewElement("svg").
		Attr("viewBox", "0 0 24 24").
		Attr("width", "18").
		Attr("height", "18").
		Attr("aria-hidden", "true").
		Attr("fill", "currentColor").
		Child(dom.NewElement("path").
			Attr("d", "M12 5C5 5 1 12 1 12s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"))
}

func (fc *fieldComponent) buildSelect() *dom.Element {
	el := dom.NewElement("select").
		ID(fc.Input.GetID()).
		Class(widget.NameField.Class(widget.PartInput).String()).
		Attr("name", fc.Input.FieldName())

	if fc.Input.IsRequired() {
		el.Attr("required", "")
	}
	el.BindAttrBoolFunc("disabled", fc.isDisabledOrLocked)

	// Two-way binding for select
	el.Bind(fc.value)
	el.OnChange(func(e dom.Event) {
		val := e.TargetValue()
		fc.value.Set(val)
		fc.validate(val)
		if fc.onCommit != nil {
			fc.onCommit()
		}
	})

	fc.bindOptions(el, func() []*dom.Element {
		val := fc.value.Get()
		opts := fc.Input.GetOptions()
		nodes := make([]*dom.Element, 0, len(opts))
		for _, opt := range opts {
			option := dom.NewElement("option").Attr("value", opt.Key).Text(lang.Translate(opt.Value).String())
			if val != "" && opt.Key == val {
				option.Attr("selected", "")
			}
			nodes = append(nodes, option)
		}
		return nodes
	})
	return el
}

func (fc *fieldComponent) buildRadio() *dom.Element {
	group := dom.NewElement("div").
		ID(fc.Input.GetID()).
		Class(widget.NameField.Class(widget.PartRadioGroup).String())
	fc.bindOptions(group, func() []*dom.Element {
		val := fc.value.Get()
		opts := fc.Input.GetOptions()
		nodes := make([]*dom.Element, 0, len(opts))
		for _, opt := range opts {
			optKey := opt.Key
			optVal := opt.Value

			radio := dom.NewElement("input").
				Attr("type", "radio").
				Class(widget.NameField.Class(widget.PartRadioNative).String()).
				Attr("name", fc.Input.FieldName()).
				Attr("value", optKey)

			if val != "" && optKey == val {
				radio.Attr("checked", "")
			}

			// Reactive checked state
			radio.BindAttrBoolFunc("checked", func() bool {
				return fc.value.Get() == optKey
			})
			radio.BindAttrBoolFunc("disabled", fc.isDisabledOrLocked)

			radio.OnChange(func(e dom.Event) {
				if e.TargetChecked() {
					fc.value.Set(optKey)
					fc.validate(optKey)
					if fc.onCommit != nil {
						fc.onCommit()
					}
				}
			})

			label := dom.NewElement("label").
				For(radio).
				Class(widget.NameField.Class(widget.PartRadioOption).String()).
				BindStateFunc(widget.Selected, func() bool {
					return fc.value.Get() == optKey
				})

			label.Child(radio)
			label.Child(radioUncheckedGlyph())
			label.Child(radioCheckedGlyph())
			label.Child(dom.NewElement("span").Text(lang.Translate(optVal).String()))
			nodes = append(nodes, label)
		}
		return nodes
	})
	return group
}

func radioUncheckedGlyph() *dom.Element {
	return dom.NewElement("svg").
		Class(widget.NameField.Class(widget.PartRadioUnchecked).String()).
		Attr("viewBox", "0 0 24 24").
		Attr("width", "24").
		Attr("height", "24").
		Attr("aria-hidden", "true").
		Child(dom.NewElement("circle").
			Attr("cx", "12").Attr("cy", "12").Attr("r", "9").
			Attr("stroke", "var(--color-outline, #D1D1D6)").
			Attr("stroke-width", "2").
			Attr("fill", "none").
			Attr("style", "fill: none;"))
}

func radioCheckedGlyph() *dom.Element {
	return dom.NewElement("svg").
		Class(widget.NameField.Class(widget.PartRadioChecked).String()).
		Attr("viewBox", "0 0 24 24").
		Attr("width", "24").
		Attr("height", "24").
		Attr("aria-hidden", "true").
		Child(
			dom.NewElement("circle").
				Attr("cx", "12").Attr("cy", "12").Attr("r", "9").
				Attr("stroke", "var(--color-primary, #654FF0)").
				Attr("stroke-width", "2").
				Attr("fill", "none").
				Attr("style", "fill: none;"),
			dom.NewElement("circle").
				Attr("cx", "12").Attr("cy", "12").Attr("r", "5").
				Attr("fill", "var(--color-primary, #654FF0)").
				Attr("style", "fill: var(--color-primary, #654FF0);"),
		)
}

func (fc *fieldComponent) buildCheckbox() *dom.Element {
	val := fc.value.Get()
	isChecked := val == "true" || val == "1" || val == "on"

	chk := dom.NewElement("input").
		Attr("type", "checkbox").
		ID(fc.Input.GetID()).
		Class(widget.NameField.Class(widget.PartCheckNative).String()).
		Attr("name", fc.Input.FieldName())

	if isChecked {
		chk.Attr("checked", "")
	}

	chk.BindAttrBoolFunc("checked", func() bool {
		v := fc.value.Get()
		return v == "true" || v == "1" || v == "on"
	})
	chk.BindAttrBoolFunc("disabled", fc.isDisabledOrLocked)

	chk.OnChange(func(e dom.Event) {
		checked := e.TargetChecked()
		v := "false"
		if checked {
			v = "true"
		}
		fc.value.Set(v)
		fc.validate(v)
		if fc.onCommit != nil {
			fc.onCommit()
		}
	})

	label := dom.NewElement("label").
		For(chk).
		Class(widget.NameField.Class(widget.PartCheckOption).String()).
		BindStateFunc(widget.Selected, func() bool {
			v := fc.value.Get()
			return v == "true" || v == "1" || v == "on"
		})

	label.Child(chk)
	label.Child(checkUncheckedGlyph())
	label.Child(checkCheckedGlyph())
	txt := fc.Input.GetPlaceholder()
	if txt == "" {
		txt = lang.Translate(fc.label).String()
	}
	label.Child(dom.NewElement("span").Text(txt))
	return label
}

func checkUncheckedGlyph() *dom.Element {
	return dom.NewElement("svg").
		Class(widget.NameField.Class(widget.PartCheckUnchecked).String()).
		Attr("viewBox", "0 0 24 24").
		Attr("width", "24").
		Attr("height", "24").
		Attr("aria-hidden", "true").
		Child(dom.NewElement("rect").
			Attr("x", "3").Attr("y", "3").Attr("width", "18").Attr("height", "18").Attr("rx", "4").
			Attr("stroke", "var(--color-outline, #D1D1D6)").
			Attr("stroke-width", "2").
			Attr("fill", "none").
			Attr("style", "fill: none;"))
}

func checkCheckedGlyph() *dom.Element {
	return dom.NewElement("svg").
		Class(widget.NameField.Class(widget.PartCheckChecked).String()).
		Attr("viewBox", "0 0 24 24").
		Attr("width", "24").
		Attr("height", "24").
		Attr("aria-hidden", "true").
		Child(
			dom.NewElement("rect").
				Attr("x", "3").Attr("y", "3").Attr("width", "18").Attr("height", "18").Attr("rx", "4").
				Attr("fill", "var(--color-primary, #654FF0)").
				Attr("style", "fill: var(--color-primary, #654FF0);"),
			dom.NewElement("path").
				Attr("d", "M7 12.5l3.5 3.5 7-7").
				Attr("stroke", "var(--color-on-primary, #ffffff)").
				Attr("stroke-width", "2.5").
				Attr("stroke-linecap", "round").
				Attr("stroke-linejoin", "round").
				Attr("fill", "none").
				Attr("style", "fill: none;"),
		)
}

func (fc *fieldComponent) buildDatalist() (*dom.Element, *dom.Element) {
	listID := fc.Input.GetID() + "-list"

	el := dom.NewElement("input").
		Attr("type", "text").
		ID(fc.Input.GetID()).
		Class(widget.NameField.Class(widget.PartInput).String()).
		Attr("name", fc.Input.FieldName()).
		Attr("list", listID)

	// Two-way binding
	el.Bind(fc.value)
	el.OnInput(func(e dom.Event) {
		val := e.TargetValue()
		fc.value.Set(val)
		fc.validate(val)
	})
	if fc.onCommit != nil {
		el.OnBlur(func(dom.Event) { fc.onCommit() })
	}

	applyCommonAttrs(el, fc)

	// dom exposes (*Element).For for for=, but nothing equivalent for list= / aria-describedby / aria-labelledby yet.
	datalist := dom.NewElement("datalist").ID(listID)
	fc.bindOptions(datalist, func() []*dom.Element {
		opts := fc.Input.GetOptions()
		nodes := make([]*dom.Element, 0, len(opts))
		for _, opt := range opts {
			nodes = append(nodes, dom.NewElement("option").Attr("value", opt.Key).Text(lang.Translate(opt.Value).String()))
		}
		return nodes
	})
	return el, datalist
}

func applyCommonAttrs(el *dom.Element, fc *fieldComponent) {
	inp := fc.Input
	if ph := inp.GetPlaceholder(); ph != "" {
		el.Attr("placeholder", ph)
	}
	if title := inp.GetTitle(); title != "" {
		el.Attr("title", title)
	}
	for _, attr := range inp.GetAttributes() {
		if attr.Value != "" {
			el.Attr(attr.Key, attr.Value)
		}
	}
	if inp.IsRequired() {
		el.Attr("required", "")
	}
	el.BindAttrBoolFunc("disabled", fc.isDisabledOrLocked)
	if inp.IsReadonly() {
		el.Attr("readonly", "")
	}
}

// RenderInput is kept for backward compatibility and as a standalone helper
func RenderInput(inp input.Input) *dom.Element {
	lbl := inp.GetTitle()
	if lbl == "" || lbl == inp.FieldName() {
		lbl = fmt.Convert(inp.FieldName()).Replace("_", " ").String()
	}
	fc := &fieldComponent{
		Input: inp,
		value: dom.NewString(""),
		err:   dom.NewString(""),
		label: lbl,
	}
	// Note: this Render() returns the field wrapper div containing the input + error span.
	return fc.Render()
}