package configview

import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/components"

templ Config(c *views.Context) {
	@components.Doctype() {
		@components.Head(c, components.HeadTitle("Redmage - Config"))
		@components.Body(c) {
			@ConfigContent(c)
		}
	}
}

templ ConfigContent(c *views.Context) {
	<main class="prose min-w-full">
		@components.Container() {
			<h1>Config</h1>
			<div class="divider"></div>
			<h2>Site Theme</h2>
			@SelectThemeInput()
		}
	</main>
}

templ SelectThemeInput() {
	<div
		class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
		onchange="document.querySelector('html').dataset.theme = event.target.value; localStorage.setItem('theme', event.target.value)"
	>
		@themeRadio("default", "System (Default)")
		@themeRadio("light", "Light")
		@themeRadio("dark", "Dark")
		@themeRadio("acid", "Acid")
		@themeRadio("aqua", "Aqua")
		@themeRadio("autumn", "Autumn")
		@themeRadio("black", "Black")
		@themeRadio("bumblebee", "Bumblebee")
		@themeRadio("business", "Business")
		@themeRadio("cmyk", "CMYK")
		@themeRadio("coffee", "Coffee")
		@themeRadio("corporate", "Corporate")
		@themeRadio("cupcake", "Cupcake")
		@themeRadio("cyberpunk", "Cyberpunk")
		@themeRadio("dim", "Dim")
		@themeRadio("dracula", "Dracula")
		@themeRadio("emerald", "Emerald")
		@themeRadio("fantasy", "Fantasy")
		@themeRadio("forest", "Forest")
		@themeRadio("garden", "Garden")
		@themeRadio("halloween", "Halloween")
		@themeRadio("lemonade", "Lemonade")
		@themeRadio("lofi", "Lo-Fi")
		@themeRadio("luxury", "Luxury")
		@themeRadio("night", "Night")
		@themeRadio("nord", "Nord")
		@themeRadio("pastel", "Pastel")
		@themeRadio("retro", "Retro")
		@themeRadio("sunset", "Sunset")
		@themeRadio("synthwave", "Synthwave")
		@themeRadio("valentine", "Valentine")
		@themeRadio("winter", "Winter")
		@themeRadio("wireframe", "Wireframe")
	</div>
	<script>
        {
            const theme = localStorage.getItem('theme') || 'default';
            document.querySelector(`input[name="theme-radios"][value="${theme}"]`).checked = true
        }
    </script>
}

templ themeRadio(value, display string) {
	<div class="form-control">
		<label class="label cursor-pointer gap-4 justify-start">
			<input type="radio" name="theme-radios" class="radio theme-controller" value={ value }/>
			<span class="label-text">{ display }</span>
		</label>
	</div>
}