'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const lit = require('lit');
const decorators_js = require('lit/decorators.js');
const tailwindVariants = require('tailwind-variants');
const safeCustomElement = require('../../shared/safe-custom-element.cjs');
require('../lukso-icon/index.cjs');
require('../lukso-dropdown/index.cjs');
require('../lukso-date-picker/index.cjs');
require('../lukso-form-label/index.cjs');
require('../lukso-form-description/index.cjs');
require('../lukso-form-error/index.cjs');
const index = require('../../shared/tailwind-element/index.cjs');
const uniqId = require('../../shared/tools/uniq-id.cjs');
const style = require('./style.css.cjs');

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
exports.LuksoInputDatePicker = class LuksoInputDatePicker extends index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    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.uniqId();
    // ─── Styles ────────────────────────────────────────────────────────────────
    this.wrapperStyles = tailwindVariants.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 = tailwindVariants.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 = tailwindVariants.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"
        }
      }
    });
  }
  // ─── Lifecycle ─────────────────────────────────────────────────────────────
  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;
    }
  }
  // ─── Computed helpers ───────────────────────────────────────────────────────
  _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;
      }
      const timeStr = new Intl.DateTimeFormat(this.locale, {
        hour: "2-digit",
        minute: "2-digit",
        hour12
      }).format(d);
      return `${dateStr} ${timeStr}`;
    } catch {
      return this._internalValue ?? "";
    }
  }
  // ─── Event handlers ─────────────────────────────────────────────────────────
  _handleOutsideClick() {
    this._isOpen = false;
  }
  _handleInputClick() {
    if (this.isDisabled || this.isReadonly) return;
    this._isOpen = !this._isOpen;
  }
  _handleDatePickerChange(e) {
    this._internalValue = e.detail.value;
    this.dispatchEvent(
      new CustomEvent("on-change", {
        detail: { value: this._internalValue, event: e.detail.event },
        bubbles: true,
        composed: true
      })
    );
  }
  // ─── Render ─────────────────────────────────────────────────────────────────
  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 lit.html`
      <div
        class="relative w-[inherit]"
        @click=${(e) => e.stopPropagation()}
      >
        <lukso-form-label label=${this.label ?? lit.nothing}></lukso-form-label>
        <lukso-form-description
          description=${this.description ?? lit.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 ? lit.html`<span class="text-neutral-70"
                      >${this.placeholder}</span
                    >` : lit.nothing}
            </div>
            <!-- Arrow icon -->
            <lukso-icon
              name="arrow-down-sm"
              class=${iconClass}
              @click=${this._handleInputClick}
            ></lukso-icon>
          </div>

          <!-- Date picker dropdown -->
          ${this._isOpen ? lit.html`
                <lukso-dropdown
                  ?is-open=${true}
                  is-open-on-outside-click
                  ?open-top=${this.openTop}
                  ?is-right=${this.openRight}
                  ?is-full-width=${this.isFullWidth}
                  size=${this.size}
                >
                  <lukso-date-picker
                    value=${this._internalValue ?? lit.nothing}
                    min=${this.min ?? lit.nothing}
                    max=${this.max ?? lit.nothing}
                    locale=${this.locale}
                    size=${this.size}
                    ?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 ?? lit.nothing}
                    selected-text-color=${this.selectedTextColor ?? lit.nothing}
                    @on-change=${this._handleDatePickerChange}
                  ></lukso-date-picker>
                </lukso-dropdown>
              ` : lit.nothing}
        </div>

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