package dev

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

	"forge.capytal.company/capytalcode/project-comicverse/lib/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/javascript/pages/devcolors.js" defer></script>
}

templ (p *Colors) Component() {
	@layouts.Page(layouts.PageInfo{
		Heading: p.Heading(),
	}) {
		<div class="m-10 flex flex-col gap-5 font-sans">
			<article>
				<input
					id="accent-color-hue"
					class="w-full"
					type="range"
					value="260"
					min="0"
					max="360"
				/>
				<details>
					<summary class="font-bold">Pallete</summary>
					<ul class="list-none p-0 flex flex-col gap-3">
						@templ.Raw(p.html())
					</ul>
				</details>
			</article>
			<article class="grid grid-cols-3">
				<section class="bg-neutral-20 p-5">
					<button>Hello world</button>
				</section>
			</article>
		</div>
	}
}

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

		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",
}
