import { safeCustomElement } from "../../shared/safe-custom-element.js";
import { TailwindStyledElement } from "../../shared/tailwind-element/index.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import "../lukso-icon/index.js";
import "../lukso-sanitize/index.js";
import "../lukso-form-description/index.js";
import "../lukso-form-error/index.js";
import "../lukso-form-label/index.js";
import "../lukso-input/index.js";
import "../lukso-dropdown/index.js";
import "../lukso-dropdown-option/index.js";
import style_default from "./style.css.js";
import { RULES_MAP } from "./rules.js";
import { html, nothing } from "lit";
import { property, state } from "lit/decorators.js";
import { tv } from "tailwind-variants";
//#region src/components/lukso-time-picker/index.ts
var LuksoTimePicker = class LuksoTimePicker extends TailwindStyledElement(style_default) {
	constructor(..._args) {
		super(..._args);
		this.locale = typeof navigator !== "undefined" ? navigator.language : "en-US";
		this.timeFormat = "auto";
		this.size = "medium";
		this.isStandalone = true;
		this.isDisabled = false;
		this._selectedHour = (/* @__PURE__ */ new Date()).getHours();
		this._selectedMinute = (/* @__PURE__ */ new Date()).getMinutes();
		this._showAmPmPicker = false;
		this.styles = tv({
			slots: {
				outer: "flex flex-col",
				card: "flex items-center bg-neutral-100 rounded-12 shadow-drop-shadow-small w-full",
				timeRow: "flex items-center gap-2",
				timeSeparator: "text-paragraph-sm text-neutral-40",
				ampmWrapper: "relative",
				ampmBtn: "w-9 text-center text-paragraph-xxs-bold text-neutral-20 border border-neutral-85 rounded-4 px-1.5 py-0.5 hover:bg-neutral-95 cursor-pointer transition-colors"
			},
			variants: {
				size: {
					small: { outer: "w-[240px]" },
					medium: { outer: "w-[300px]" },
					large: { outer: "w-[360px]" },
					"x-large": { outer: "w-[420px]" },
					full: { outer: "w-full" }
				},
				isDisabled: { true: { outer: "opacity-50 pointer-events-none" } }
			}
		});
	}
	willUpdate(changed) {
		if (changed.has("value") && this.value) {
			const [hStr, mStr] = this.value.split(":");
			const h = parseInt(hStr, 10);
			const m = parseInt(mStr, 10);
			if (!isNaN(h) && !isNaN(m)) {
				this._selectedHour = Math.max(0, Math.min(23, h));
				this._selectedMinute = Math.max(0, Math.min(59, m));
			}
		}
	}
	get _uses24Hour() {
		if (this.timeFormat === "24h") return true;
		if (this.timeFormat === "12h") return false;
		try {
			return new Intl.DateTimeFormat(this.locale, { hour: "numeric" }).resolvedOptions().hour12 === false;
		} catch {
			return true;
		}
	}
	get _displayHour() {
		if (this._uses24Hour) return String(this._selectedHour).padStart(2, "0");
		const h = this._selectedHour % 12;
		return String(h === 0 ? 12 : h);
	}
	get _displayMinute() {
		return String(this._selectedMinute).padStart(2, "0");
	}
	get _amPmLabel() {
		return this._selectedHour < 12 ? "AM" : "PM";
	}
	_buildTimeValue() {
		return `${String(this._selectedHour).padStart(2, "0")}:${String(this._selectedMinute).padStart(2, "0")}`;
	}
	_handleHourChange(event) {
		const { value: rawStringValue, event: innerEvent } = event.detail;
		const sanitized = (this._uses24Hour ? RULES_MAP.isHour24 : RULES_MAP.isHour12).sanitize(rawStringValue);
		const rawValue = parseInt(sanitized, 10);
		if (isNaN(rawValue) || !this._uses24Hour && rawValue === 0) return;
		if (this._uses24Hour) this._selectedHour = rawValue;
		else {
			const isPm = this._selectedHour >= 12;
			this._selectedHour = isPm ? rawValue === 12 ? 12 : rawValue + 12 : rawValue === 12 ? 0 : rawValue;
		}
		this._emitChange(innerEvent);
	}
	_handleMinuteChange(event) {
		const { value: rawStringValue, event: innerEvent } = event.detail;
		const sanitized = RULES_MAP.isMinute.sanitize(rawStringValue);
		const rawValue = parseInt(sanitized, 10);
		if (isNaN(rawValue)) return;
		this._selectedMinute = rawValue;
		this._emitChange(innerEvent);
	}
	_toggleAmPmPicker(e) {
		e.stopPropagation();
		this._showAmPmPicker = !this._showAmPmPicker;
	}
	_selectAmPm(period, e) {
		e.stopPropagation();
		const isCurrentlyAm = this._selectedHour < 12;
		const wantAm = period === "AM";
		if (isCurrentlyAm !== wantAm) this._selectedHour = wantAm ? this._selectedHour - 12 : this._selectedHour + 12;
		this._showAmPmPicker = false;
		this._emitChange(e);
	}
	_emitChange(event) {
		this.dispatchEvent(new CustomEvent("on-change", {
			detail: {
				value: this._buildTimeValue(),
				event
			},
			bubbles: true,
			composed: true
		}));
	}
	_renderTimeRow(timeRow, timeSeparator, ampmWrapper, ampmBtn) {
		return html`
      <div class=${timeRow()}>
        <div class="w-8">
          <lukso-input
            type="text"
            size="medium"
            ?borderless=${true}
            .rules=${["allowNumbersAndDot", "disallowDecimal"]}
            ?is-full-width=${true}
            custom-class="text-center text-neutral-20 !px-1"
            .value=${this._displayHour}
            aria-label="Hours"
            @on-input=${this._handleHourChange}
          ></lukso-input>
        </div>
        <span class=${timeSeparator()}>:</span>
        <div class="w-8">
          <lukso-input
            type="text"
            size="medium"
            ?borderless=${true}
            .rules=${["allowNumbersAndDot", "disallowDecimal"]}
            ?is-full-width=${true}
            custom-class="text-center text-neutral-20 !px-1"
            .value=${this._displayMinute}
            aria-label="Minutes"
            @on-input=${this._handleMinuteChange}
          ></lukso-input>
        </div>
        ${!this._uses24Hour ? html`
              <div
                class=${ampmWrapper()}
                @click=${(e) => e.stopPropagation()}
              >
                <button
                  type="button"
                  class=${ampmBtn()}
                  @click=${this._toggleAmPmPicker}
                  aria-haspopup="listbox"
                  aria-expanded=${this._showAmPmPicker ? "true" : "false"}
                >
                  ${this._amPmLabel}
                </button>
                <lukso-dropdown
                  ?is-open=${this._showAmPmPicker}
                  open-top
                  is-right
                  size="small"
                >
                  <lukso-dropdown-option
                    size="small"
                    ?is-selected=${this._amPmLabel === "AM"}
                    @click=${(e) => this._selectAmPm("AM", e)}
                    >AM</lukso-dropdown-option
                  >
                  <lukso-dropdown-option
                    size="small"
                    ?is-selected=${this._amPmLabel === "PM"}
                    @click=${(e) => this._selectAmPm("PM", e)}
                    >PM</lukso-dropdown-option
                  >
                </lukso-dropdown>
              </div>
            ` : nothing}
      </div>
    `;
	}
	render() {
		const { outer, card, timeRow, timeSeparator, ampmWrapper, ampmBtn } = this.styles({
			size: this.size,
			isDisabled: this.isDisabled
		});
		const controls = this._renderTimeRow(timeRow, timeSeparator, ampmWrapper, ampmBtn);
		if (!this.isStandalone) return controls;
		return html`
      <div
        class=${outer()}
        @click=${() => {
			this._showAmPmPicker = false;
		}}
      >
        <lukso-form-label label=${this.label ?? nothing}></lukso-form-label>
        <lukso-form-description
          description=${this.description ?? nothing}
        ></lukso-form-description>
        <div class=${card()}>${controls}</div>
        <lukso-form-error error=${this.error ?? nothing}></lukso-form-error>
      </div>
    `;
	}
};
__decorate([property({ type: String })], LuksoTimePicker.prototype, "value", void 0);
__decorate([property({ type: String })], LuksoTimePicker.prototype, "locale", void 0);
__decorate([property({
	type: String,
	attribute: "time-format"
})], LuksoTimePicker.prototype, "timeFormat", void 0);
__decorate([property({ type: String })], LuksoTimePicker.prototype, "size", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-standalone"
})], LuksoTimePicker.prototype, "isStandalone", void 0);
__decorate([property({ type: String })], LuksoTimePicker.prototype, "label", void 0);
__decorate([property({ type: String })], LuksoTimePicker.prototype, "description", void 0);
__decorate([property({ type: String })], LuksoTimePicker.prototype, "error", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-disabled"
})], LuksoTimePicker.prototype, "isDisabled", void 0);
__decorate([state()], LuksoTimePicker.prototype, "_selectedHour", void 0);
__decorate([state()], LuksoTimePicker.prototype, "_selectedMinute", void 0);
__decorate([state()], LuksoTimePicker.prototype, "_showAmPmPicker", void 0);
LuksoTimePicker = __decorate([safeCustomElement("lukso-time-picker")], LuksoTimePicker);
//#endregion
export { LuksoTimePicker };
