package webui

import "kjol/vdom"

// Port of web/kit/Chart.tsx (default export ReactiveChart).
//
// NOTE: The TSX wraps chart.js — it imperatively creates a `new Chart(ctx, cfg)`
// against a <canvas> 2D context inside onMount, and pushes new data/options via
// createEffect. None of that (canvas 2D drawing, a JS charting lib, mount/cleanup
// lifecycles) exists in the neutral gowasm runtime, so actual chart DRAWING is out
// of scope here. This port renders the faithful container structure + Tailwind and
// an empty <canvas>, keeping a props shape for API parity. The example app instead
// draws charts server-side as go-chart SVG.

// Chart type identifiers (chart.js `type`), kept for API parity with the TSX
// ChartType union. Unused by this SVG-less container.
const (
	ChartTypeLine      = "line"
	ChartTypeBar       = "bar"
	ChartTypeRadar     = "radar"
	ChartTypeDoughnut  = "doughnut"
	ChartTypePolarArea = "polarArea"
	ChartTypeBubble    = "bubble"
	ChartTypePie       = "pie"
	ChartTypeScatter   = "scatter"
)

// ReactiveChartProps mirrors the TSX props. Data and Options are accepted for API
// parity but are not rendered (no JS chart lib in the neutral runtime; see NOTE).
type ReactiveChartProps struct {
	Type    string
	Data    any
	Options any
	Class   string
}

// ReactiveChart renders the chart container (h-full + user class) wrapping an
// empty <canvas>. Drawing is out of scope — see the file NOTE.
func ReactiveChart(p ReactiveChartProps) *vdom.VNode {
	return vdom.El("div",
		vdom.Attr("class", cx("h-full", p.Class)),
		vdom.El("canvas"),
	)
}