package app

import (
	"bytes"
	"io"
	"math/rand"

	chart "github.com/wcharczuk/go-chart/v2"

	. "kjol/vdom"
)

var chartLabels = []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}

// fixed initial data so the server SSR and the client's first render match.
func fixedChartData() []int { return []int{42, 17, 63, 28, 55, 9, 71} }

func randomValues() []int {
	v := make([]int, len(chartLabels))
	for i := range v {
		v[i] = rand.Intn(95) + 5
	}
	return v
}

func renderSVG(c interface {
	Render(chart.RendererProvider, io.Writer) error
}) string {
	var buf bytes.Buffer
	if c.Render(chart.SVG, &buf) != nil {
		return "<p class=\"text-danger m-0\">chart error</p>"
	}
	return buf.String()
}

func barSVG(values []int) string {
	bars := make([]chart.Value, len(values))
	for i, v := range values {
		bars[i] = chart.Value{Value: float64(v), Label: chartLabels[i%len(chartLabels)]}
	}
	return renderSVG(&chart.BarChart{
		Title:      "Weekly values (bar)",
		TitleStyle: chart.Style{FontSize: 15},
		Background: chart.Style{Padding: chart.Box{Top: 48, Left: 16, Right: 16, Bottom: 16}},
		Height:     320, BarWidth: 48, Bars: bars,
	})
}

func pieSVG(values []int) string {
	vs := make([]chart.Value, len(values))
	for i, v := range values {
		vs[i] = chart.Value{Value: float64(v), Label: chartLabels[i%len(chartLabels)]}
	}
	return renderSVG(&chart.PieChart{
		Title:      "Share by day (pie)",
		TitleStyle: chart.Style{FontSize: 15},
		Background: chart.Style{Padding: chart.Box{Top: 48}},
		Width:      320, Height: 320, Values: vs,
	})
}

//gowasm:page /chart static layout=app
func ChartPage(d Deps) func() *VNode {
	data := NewSignal(fixedChartData())
	return func() *VNode {
		values := data.Get()
		return Div(
			H2(Attr("class", "h4 mb-3"), Text("Charts — go-chart (SSR + hydrate)")),
			P(Attr("class", "text-secondary"),
				Text("Rendered to SVG on the server, hydrated on the client; Shuffle re-renders client-side.")),
			Button(Attr("class", "btn btn-primary mb-3"),
				On(EVENT_CLICK, func() { data.Set(randomValues()) }), Text("Shuffle Data")),
			Div(Attr("class", "row"),
				Div(Attr("class", "col-12 col-lg-7 mb-3"),
					Div(Attr("class", "border rounded p-2 bg-white overflow-auto"), Raw(barSVG(values)))),
				Div(Attr("class", "col-12 col-lg-5 mb-3"),
					Div(Attr("class", "border rounded p-2 bg-white overflow-auto"), Raw(pieSVG(values)))),
			),
		)
	}
}