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-form-description/index.js";
import "../lukso-form-error/index.js";
import "../lukso-form-label/index.js";
import { uniqId } from "../../shared/tools/uniq-id.js";
import "../lukso-dropdown/index.js";
import "../lukso-date-picker/index.js";
import style_default from "./style.css?inline.js";
import { html, nothing } from "lit";
import { property, state } from "lit/decorators.js";
import { tv } from "tailwind-variants";
//#region src/components/lukso-input-date-picker/index.ts
var LuksoInputDatePicker = class LuksoInputDatePicker extends TailwindStyledElement(style_default) {
	constructor(..._args) {
		super(..._args);
		this.locale = typeof navigator !== "undefined" ? navigator.language : "en-US";
		this.size = "large";
		this.placeholder = "";
		this.showTime = true;
		this.dateFormat = "short";
		this.timeFormat = "auto";
		this.weekStartDay = "monday";
		this.isDisabled = false;
		this.isReadonly = false;
		this.isFullWidth = false;
		this.borderless = false;
		this.openTop = false;
		this.openRight = false;
		this._isOpen = false;
		this._inputId = uniqId();
		this.wrapperStyles = tv({
			base: "group",
			variants: {
				isFullWidth: {
					true: "w-full",
					false: "w-[350px]"
				},
				size: {
					small: "",
					medium: "",
					large: "",
					"x-large": ""
				}
			},
			compoundVariants: [{
				isFullWidth: false,
				size: "small",
				class: "w-[190px]"
			}]
		});
		this.inputStyles = tv({
			base: `bg-neutral-100 border border-solid select-none
      outline-none transition-all duration-150 text-neutral-20 cursor-pointer
      border-neutral-90 group-hover:border-neutral-35 flex items-center w-full`,
			variants: {
				isDisabled: { true: "cursor-not-allowed text-neutral-60 group-hover:border-neutral-90" },
				hasError: { true: "border-red-85 group-hover:border-red-65" },
				borderless: { true: "border-0" },
				size: {
					small: "h-7 px-3 py-2 pr-8 paragraph-inter-12-regular rounded-8",
					medium: "h-10 px-3 py-3 pr-11 paragraph-inter-14-regular rounded-10",
					large: "h-12 px-4 py-3 pr-11 paragraph-inter-14-regular rounded-12",
					"x-large": "h-17 px-5 py-5 pr-14 paragraph-inter-16-regular rounded-[14px]"
				}
			}
		});
		this.iconStyles = tv({
			base: "absolute right-0 transition cursor-pointer",
			variants: {
				isDisabled: { true: "opacity-60 cursor-not-allowed" },
				isOpen: { true: "rotate-180" },
				size: {
					small: "mr-2",
					medium: "mr-3",
					large: "mr-3",
					"x-large": "mr-4"
				}
			}
		});
	}
	connectedCallback() {
		super.connectedCallback();
		this._boundOutsideClick = this._handleOutsideClick.bind(this);
		window.addEventListener("click", this._boundOutsideClick);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		if (this._boundOutsideClick) window.removeEventListener("click", this._boundOutsideClick);
	}
	willUpdate(changed) {
		if (changed.has("value")) this._internalValue = this.value;
	}
	_formatDisplayValue() {
		if (!this._internalValue) return "";
		try {
			const d = new Date(this._internalValue);
			if (isNaN(d.getTime())) return "";
			const dateOpts = this.dateFormat === "long" ? {
				month: "long",
				day: "numeric",
				year: "numeric"
			} : {
				month: "short",
				day: "numeric",
				year: "numeric"
			};
			const dateStr = new Intl.DateTimeFormat(this.locale, dateOpts).format(d);
			if (!this.showTime) return dateStr;
			let hour12;
			if (this.timeFormat === "12h") hour12 = true;
			else if (this.timeFormat === "24h") hour12 = false;
			else hour12 = new Intl.DateTimeFormat(this.locale, { hour: "numeric" }).resolvedOptions().hour12;
			return `${dateStr} ${new Intl.DateTimeFormat(this.locale, {
				hour: "2-digit",
				minute: "2-digit",
				hour12
			}).format(d)}`;
		} catch {
			return this._internalValue ?? "";
		}
	}
	_handleOutsideClick(event) {
		if (!event.composedPath().includes(this)) this._isOpen = false;
	}
	_handleInputClick() {
		if (this.isDisabled || this.isReadonly) return;
		this._isOpen = !this._isOpen;
	}
	_handleDatePickerChange(e) {
		this._internalValue = e.detail.value;
		if (!this.showTime || e.detail.event instanceof MouseEvent && e.detail.event.type === "click") this._isOpen = false;
		this.dispatchEvent(new CustomEvent("on-change", {
			detail: {
				value: this._internalValue,
				event: e.detail.event
			},
			bubbles: true,
			composed: true
		}));
	}
	render() {
		const displayValue = this._formatDisplayValue();
		const wrapperClass = this.wrapperStyles({
			isFullWidth: this.isFullWidth,
			size: this.size
		});
		const inputClass = this.inputStyles({
			isDisabled: this.isDisabled,
			hasError: !!this.error,
			borderless: this.borderless,
			size: this.size
		});
		const iconClass = this.iconStyles({
			isDisabled: this.isDisabled,
			isOpen: this._isOpen,
			size: this.size
		});
		return html`
      <div class="relative w-[inherit]">
        <lukso-form-label label=${this.label ?? nothing}></lukso-form-label>
        <lukso-form-description
          description=${this.description ?? nothing}
        ></lukso-form-description>

        <div class=${wrapperClass}>
          <div class="flex relative items-center w-full">
            <!-- Input trigger -->
            <div
              id=${this._inputId}
              class=${inputClass}
              @click=${this._handleInputClick}
              aria-haspopup="true"
              aria-expanded=${this._isOpen ? "true" : "false"}
              role="combobox"
            >
              ${displayValue ? displayValue : this.placeholder ? html`<span class="text-neutral-70"
                      >${this.placeholder}</span
                    >` : nothing}
            </div>
            <!-- Arrow icon -->
            <lukso-icon
              name="arrow-down-sm"
              class=${iconClass}
              @click=${this._handleInputClick}
            ></lukso-icon>
          </div>

          <!-- Date picker dropdown: always in DOM to preserve internal date state -->
          <lukso-dropdown
            ?is-open=${this._isOpen}
            is-open-on-outside-click
            ?open-top=${this.openTop}
            ?is-right=${this.openRight}
            ?is-full-width=${this.isFullWidth}
            size="large"
            custom-class="min-w-[300px] min-h-[390px]"
            max-height="500"
          >
            <lukso-date-picker
              value=${this._internalValue ?? nothing}
              min=${this.min ?? nothing}
              max=${this.max ?? nothing}
              locale=${this.locale}
              size="large"
              ?show-time=${this.showTime}
              ?show-summary=${this.showTime}
              date-format=${this.dateFormat}
              time-format=${this.timeFormat}
              week-start-day=${this.weekStartDay}
              ?is-disabled=${this.isDisabled}
              ?is-full-width=${this.isFullWidth}
              selected-bg-color=${this.selectedBgColor ?? nothing}
              selected-text-color=${this.selectedTextColor ?? nothing}
              @on-change=${this._handleDatePickerChange}
            ></lukso-date-picker>
          </lukso-dropdown>
        </div>

        <lukso-form-error error=${this.error ?? nothing}></lukso-form-error>
      </div>
    `;
	}
};
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "value", void 0);
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "min", void 0);
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "max", void 0);
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "locale", void 0);
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "size", void 0);
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "placeholder", void 0);
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "label", void 0);
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "description", void 0);
__decorate([property({ type: String })], LuksoInputDatePicker.prototype, "error", void 0);
__decorate([property({
	type: Boolean,
	attribute: "show-time"
})], LuksoInputDatePicker.prototype, "showTime", void 0);
__decorate([property({
	type: String,
	attribute: "date-format"
})], LuksoInputDatePicker.prototype, "dateFormat", void 0);
__decorate([property({
	type: String,
	attribute: "time-format"
})], LuksoInputDatePicker.prototype, "timeFormat", void 0);
__decorate([property({
	type: String,
	attribute: "week-start-day"
})], LuksoInputDatePicker.prototype, "weekStartDay", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-disabled"
})], LuksoInputDatePicker.prototype, "isDisabled", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-readonly"
})], LuksoInputDatePicker.prototype, "isReadonly", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-full-width"
})], LuksoInputDatePicker.prototype, "isFullWidth", void 0);
__decorate([property({ type: Boolean })], LuksoInputDatePicker.prototype, "borderless", void 0);
__decorate([property({
	type: String,
	attribute: "selected-bg-color"
})], LuksoInputDatePicker.prototype, "selectedBgColor", void 0);
__decorate([property({
	type: String,
	attribute: "selected-text-color"
})], LuksoInputDatePicker.prototype, "selectedTextColor", void 0);
__decorate([property({
	type: Boolean,
	attribute: "open-top"
})], LuksoInputDatePicker.prototype, "openTop", void 0);
__decorate([property({
	type: Boolean,
	attribute: "open-right"
})], LuksoInputDatePicker.prototype, "openRight", void 0);
__decorate([state()], LuksoInputDatePicker.prototype, "_isOpen", void 0);
__decorate([state()], LuksoInputDatePicker.prototype, "_internalValue", void 0);
LuksoInputDatePicker = __decorate([safeCustomElement("lukso-input-date-picker")], LuksoInputDatePicker);
//#endregion
export { LuksoInputDatePicker };
