// templui component input - version: v0.84.0 installed by templui v0.84.0
package input

import (
	"git.jmbit.de/jmb/scanfile/server/web/templui/components/button"
	"git.jmbit.de/jmb/scanfile/server/web/templui/components/icon"
	"git.jmbit.de/jmb/scanfile/server/web/templui/utils"
)

type Type string

const (
	TypeText     Type = "text"
	TypePassword Type = "password"
	TypeEmail    Type = "email"
	TypeNumber   Type = "number"
	TypeTel      Type = "tel"
	TypeURL      Type = "url"
	TypeSearch   Type = "search"
	TypeDate     Type = "date"
	TypeTime     Type = "time"
	TypeFile     Type = "file"
)

type Props struct {
	ID               string
	Class            string
	Attributes       templ.Attributes
	Name             string
	Type             Type
	Placeholder      string
	Value            string
	Disabled         bool
	Readonly         bool
	Required         bool
	FileAccept       string
	HasError         bool
	NoTogglePassword bool
}

templ Input(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.Type == "" {
		{{ p.Type = TypeText }}
	}
	if p.ID == "" {
		{{ p.ID = utils.RandomID() }}
	}
	<div class="relative w-full">
		<input
			id={ p.ID }
			type={ string(p.Type) }
			if p.Name != "" {
				name={ p.Name }
			}
			if p.Placeholder != "" {
				placeholder={ p.Placeholder }
			}
			if p.Value != "" {
				value={ p.Value }
			}
			if p.Type == TypeFile && p.FileAccept != "" {
				accept={ p.FileAccept }
			}
			disabled?={ p.Disabled }
			readonly?={ p.Readonly }
			required?={ p.Required }
			if p.HasError {
				aria-invalid="true"
			}
			class={
				utils.TwMerge(
					// Base styles
					"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
					// Dark mode background
					"dark:bg-input/30",
					// Selection styles
					"selection:bg-primary selection:text-primary-foreground",
					// Placeholder
					"placeholder:text-muted-foreground",
					// File input styles
					"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
					// Focus styles
					"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
					// Disabled styles
					"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
					// Error/Invalid styles
					"aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40",
					utils.If(p.HasError, "border-destructive ring-destructive/20 dark:ring-destructive/40"),
					utils.If(p.Type == TypePassword && !p.NoTogglePassword, "pr-8"),
					p.Class,
				),
			}
			{ p.Attributes... }
		/>
		if p.Type == TypePassword && !p.NoTogglePassword {
			@button.Button(button.Props{
				Size:       button.SizeIcon,
				Variant:    button.VariantGhost,
				Class:      "absolute right-0 top-1/2 -translate-y-1/2 opacity-50 cursor-pointer",
				Attributes: templ.Attributes{"data-toggle-password": p.ID},
			}) {
				<span class="icon-open block">
					@icon.Eye(icon.Props{
						Size: 18,
					})
				</span>
				<span class="icon-closed hidden">
					@icon.EyeOff(icon.Props{
						Size: 18,
					})
				</span>
			}
		}
	</div>
}

templ Script() {
	<script defer src="/assets/js/input.min.js"></script>
}