package components

import "github.com/gin-gonic/gin"

templ errorIcon() {
	<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M12 16.99V17M12 7V14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
			stroke="currentColor"
			stroke-width="1.5"
			stroke-linecap="round"
			stroke-linejoin="round"
		></path>
	</svg>
}

templ closeButton() {
	<button
		onclick="hideError();"
		class="text-red-500 ml-auto hover:bg-red-200 p-1 rounded-sm transition-all duration-300 cursor-pointer"
	>
		<svg class="h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path
				fill-rule="evenodd"
				clip-rule="evenodd"
				d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z"
				fill="currentColor"
			></path>
		</svg>
	</button>
}

templ errorBanner(message string) {
	<div
		id="error-toast"
		hx-swap-oob="outerHTML"
		class="fixed z-20 border border-red-500 rounded-sm right-0 top-0 m-4 p-4 bg-red-100 shadow shadow-red-200 transition-all duration-300 text-sm md:w-1/3"
	>
		<div class="flex items-center gap-x-2 pb-1">
			@errorIcon()
			<h1 class="text-red-500 font-semibold">Error</h1>
			@closeButton()
		</div>
		<div class="ml-8">
			<p class="text-red-500 text-sm">
				{ message }
			</p>
		</div>
	</div>
}

// RenderErrorBanner renders the error banner. However, this function must ONLY be called by an
// HTMX route. Otherwise, there is no promise it will work (may result in undefined behavior).
// Just writes a piece of content to the response.
func RenderErrorBanner(ctx *gin.Context, message string) {
	ctx.Writer.Header().Set("Content-Type", "text/html")
	errorBanner(message).Render(ctx.Request.Context(), ctx.Writer)
}