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

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

type LocaleTag string

var (
	LocaleDefaultTag    = LocaleTag("en-US")
	LocaleTagChinese    = LocaleTag("zh-CN")
	LocaleTagFrench     = LocaleTag("fr-FR")
	LocaleTagGerman     = LocaleTag("de-DE")
	LocaleTagItalian    = LocaleTag("it-IT")
	LocaleTagJapanese   = LocaleTag("ja-JP")
	LocaleTagPortuguese = LocaleTag("pt-PT")
	LocaleTagSpanish    = LocaleTag("es-ES")
)

type Props struct {
	ID           string
	Class        string
	LocaleTag    LocaleTag
	Value        *time.Time
	Name         string
	InitialMonth int // Optional: 0-11 (Default: current or from Value). Controls the initially displayed month view.
	InitialYear  int // Optional: (Default: current or from Value). Controls the initially displayed year view.
}

templ Calendar(props ...Props) {
	{{
	var p Props
	if len(props) > 0 {
		p = props[0]
	}
	if p.ID == "" {
		p.ID = utils.RandomID() + "-calendar"
	}
	if p.Name == "" {
		// Should be provided by parent (e.g., DatePicker or in standalone usage)
		p.Name = p.ID + "-value" // Fallback name
	}
	if p.LocaleTag == "" {
		p.LocaleTag = LocaleDefaultTag
	}

	initialView := time.Now()
	if p.Value != nil {
		initialView = *p.Value
	}

	initialMonth := p.InitialMonth
	initialYear := p.InitialYear

	// Use year from initialView if InitialYear prop is invalid/unset (<= 0)
	if initialYear <= 0 {
		initialYear = initialView.Year()
	}

	// Use month from initialView if InitialMonth prop is invalid OR
	// if InitialMonth is default 0 AND InitialYear was also defaulted (meaning neither was likely set explicitly)
	if (initialMonth < 0 || initialMonth > 11) || (initialMonth == 0 && p.InitialYear <= 0) {
		initialMonth = int(initialView.Month()) - 1 // time.Month is 1-12
	}

	initialSelectedISO := ""
	if p.Value != nil {
		initialSelectedISO = p.Value.Format("2006-01-02")
	}
	}}
	<div class={ p.Class } id={ p.ID + "-wrapper" } data-calendar-wrapper="true">
		<input
			type="hidden"
			name={ p.Name }
			value={ initialSelectedISO }
			id={ p.ID + "-hidden" }
			data-calendar-hidden-input
		/>
		<div
			id={ p.ID }
			data-calendar-container="true"
			data-locale-tag={ string(p.LocaleTag) }
			data-initial-month={ strconv.Itoa(initialMonth) }
			data-initial-year={ strconv.Itoa(initialYear) }
			data-selected-date={ initialSelectedISO }
		>
			<!-- Calendar Header -->
			<div class="flex items-center justify-between mb-4">
				<span data-calendar-month-display class="text-sm font-medium"></span>
				<div class="flex gap-1">
					<button
						type="button"
						data-calendar-prev
						class="inline-flex items-center justify-center rounded-md text-sm font-medium h-7 w-7 hover:bg-accent hover:text-accent-foreground focus:outline-none disabled:opacity-50"
					>
						@icon.ChevronLeft()
					</button>
					<button
						type="button"
						data-calendar-next
						class="inline-flex items-center justify-center rounded-md text-sm font-medium h-7 w-7 hover:bg-accent hover:text-accent-foreground focus:outline-none disabled:opacity-50"
					>
						@icon.ChevronRight()
					</button>
				</div>
			</div>
			<!-- Weekday Headers -->
			<div data-calendar-weekdays class="grid grid-cols-7 gap-1 mb-1 place-items-center"></div>
			<!-- Calendar Day Grid -->
			<div data-calendar-days class="grid grid-cols-7 gap-1 place-items-center"></div>
		</div>
	</div>
}

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