package testcssusage

import (
	"fmt"
	"math"
)

templ StyleTagsAreSupported() {
	<style>
	.test {
		color: #ff0000;
	}
	</style>
	<div class="test">Style tags are supported</div>
}

// CSS components.

const red = "#00ff00"

css cssComponentGreen() {
	color: { red };
}

templ CSSComponentsAreSupported() {
	<div class={ cssComponentGreen() }>CSS components are supported</div>
}

// Both CSS components and constants are supported.
// Only string names are really required. There is no need to use templ.Class or templ.SafeClass.
templ CSSComponentsAndConstantsAreSupported() {
	<div class={ cssComponentGreen(), "classA", templ.Class("&&&classB"), templ.SafeClass("classC"), "d e" } type="button">Both CSS components and constants are supported</div>
	// The following is also valid, but not required - you can put the class names in directly.
	<div class={ templ.Classes(cssComponentGreen(), "classA", templ.Class("&&&classB"), templ.SafeClass("classC")), "d e" } type="button">Both CSS components and constants are supported</div>
}

// Maps can be used to determine if a class should be added or not.
templ MapsCanBeUsedToConditionallySetClasses() {
	<div class={ map[string]bool{"a": true, "b": false, "c": true} }>Maps can be used to determine if a class should be added or not.</div>
}

// The templ.KV function can be used to add a class if a condition is true.

css d() {
	font-size: 12pt;
}

css e() {
	font-size: 14pt;
}

templ KVCanBeUsedToConditionallySetClasses() {
	<div class={ "a", templ.KV("b", false), "c", templ.KV(d(), false), templ.KV(e(), true) }>KV can be used to conditionally set classes.</div>
}

// Pseudo attributes can be used without any special syntax.
templ PseudoAttributesAndComplexClassNamesAreSupported() {
	<div class={ "bg-violet-500", "hover:bg-red-600", "hover:bg-sky-700", "text-[#50d71e]", "w-[calc(100%-4rem)" }>Pseudo attributes and complex class names are supported.</div>
}

// Class names are HTML escaped.
templ ClassNamesAreHTMLEscaped() {
	<div class={ "a\" onClick=\"alert('hello')\"" }>Class names are HTML escaped.</div>
}

// CSS components can be used with arguments.

css loading(percent int) {
	width: { fmt.Sprintf("%d%%", percent) };
}

templ CSSComponentsCanBeUsedWithArguments() {
	<div class={ loading(50) }>CSS components can be used with arguments.</div>
	<div class={ loading(100) }>CSS components can be used with arguments.</div>
}

css windVaneRotation(degrees float64) {
	transform: { templ.SafeCSSProperty(fmt.Sprintf("rotate(%ddeg)", int(math.Round(degrees)))) };
}

templ Rotate(degrees float64) {
	<div class={ windVaneRotation(degrees) }>Rotate</div>
}

// Combine all tests.
templ TestComponent() {
	@StyleTagsAreSupported()
	@CSSComponentsAreSupported()
	@CSSComponentsAndConstantsAreSupported()
	@MapsCanBeUsedToConditionallySetClasses()
	@KVCanBeUsedToConditionallySetClasses()
	@PseudoAttributesAndComplexClassNamesAreSupported()
	@ClassNamesAreHTMLEscaped()
	@CSSComponentsCanBeUsedWithArguments()
	@Rotate(45)
}