package pages

import (
	"net/http"
	"fmt"
	"strings"

	"forge.capytal.company/capytalcode/project-comicverse/router/rerrors"
	"forge.capytal.company/capytalcode/project-comicverse/templates/layouts"
)

type Colors struct{}

func (p *Colors) ServeHTTP(w http.ResponseWriter, r *http.Request) {
	if err := p.Component().Render(r.Context(), w); err != nil {
		rerrors.InternalError(err).ServeHTTP(w, r)
		return
	}
}

templ (p *Colors) Heading() {
	<script type="module" src="/assets/js/pages/devcolors.js" defer></script>
}

templ (p *Colors) Component() {
	@layouts.Page(layouts.PageInfo{
		Heading: p.Heading(),
	}) {
		<main class="absolute w-screen h-screen top-0 left-0 bg-#000000">
			<section>
				<input id="accent-color-hue" class="w-93% mx-10" type="range" value="260" min="0" max="360"/>
				@templ.Raw(p.html())
			</section>
			<section>
				<button>Hello world</button>
			</section>
		</main>
	}
}

func (p *Colors) html() string {
	cs := []string{}
	for _, c := range colors {
		ss := []string{"<ul class=\"flex gap-2 list-none\">"}
		for _, s := range scales {
			ss = append(ss, fmt.Sprintf("<li style=\"background-color:var(--theme-%s-%s); width: 5rem; height: 5rem;\"></li>", c, s))
		}
		ss = append(ss, "</ul>")

		cs = append(cs, strings.Join(ss, ""))
	}

	return strings.Join(cs, "")
}

var colors = []string{
	"accent",
	"neutral",
	"danger",
	"success",
	"warn",
}

var scales = []string{
	"10",
	"20",
	"30",
	"40",
	"50",
	"60",
	"70",
	"80",
	"90",
	"100",
	"110",
	"120",
}
