'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-input/index.cjs');
require('../lukso-sanitize/index.cjs');
require('../lukso-form-label/index.cjs');
require('../lukso-form-description/index.cjs');
require('../lukso-form-error/index.cjs');
require('../lukso-dropdown/index.cjs');
require('../lukso-dropdown-option/index.cjs');
const index = require('../../shared/tailwind-element/index.cjs');
const style = require('./style.css.cjs');
const rules = require('./rules.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.LuksoTimePicker = class LuksoTimePicker extends index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    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;
    // ─── Styles ────────────────────────────────────────────────────────────────
    this.styles = tailwindVariants.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" }
        }
      }
    });
  }
  // ─── Lifecycle ─────────────────────────────────────────────────────────────
  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));
      }
    }
  }
  // ─── Computed helpers ───────────────────────────────────────────────────────
  get _uses24Hour() {
    if (this.timeFormat === "24h") return true;
    if (this.timeFormat === "12h") return false;
    try {
      const resolved = new Intl.DateTimeFormat(this.locale, {
        hour: "numeric"
      }).resolvedOptions();
      return resolved.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")}`;
  }
  // ─── Event handlers ─────────────────────────────────────────────────────────
  _handleHourChange(event) {
    const { value: rawStringValue, event: innerEvent } = event.detail;
    const rule = this._uses24Hour ? rules.RULES_MAP.isHour24 : rules.RULES_MAP.isHour12;
    const sanitized = rule.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.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
      })
    );
  }
  // ─── Render ─────────────────────────────────────────────────────────────────
  _renderTimeRow(timeRow, timeSeparator, ampmWrapper, ampmBtn) {
    return lit.html`
      <div class=${timeRow()}>
        <div class="w-8">
          <lukso-input
            type="text"
            size="medium"
            ?borderless=${true}
            .rules=${["onlyNumbersAndDot", "noDecimal"]}
            ?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=${["onlyNumbersAndDot", "noDecimal"]}
            ?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 ? lit.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>
            ` : lit.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 lit.html`
      <div
        class=${outer()}
        @click=${() => {
      this._showAmPmPicker = false;
    }}
      >
        <lukso-form-label label=${this.label ?? lit.nothing}></lukso-form-label>
        <lukso-form-description
          description=${this.description ?? lit.nothing}
        ></lukso-form-description>
        <div class=${card()}>${controls}</div>
        <lukso-form-error error=${this.error ?? lit.nothing}></lukso-form-error>
      </div>
    `;
  }
};
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoTimePicker.prototype, "value", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoTimePicker.prototype, "locale", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "time-format" })
], exports.LuksoTimePicker.prototype, "timeFormat", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoTimePicker.prototype, "size", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "is-standalone" })
], exports.LuksoTimePicker.prototype, "isStandalone", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoTimePicker.prototype, "label", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoTimePicker.prototype, "description", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoTimePicker.prototype, "error", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
], exports.LuksoTimePicker.prototype, "isDisabled", 2);
__decorateClass([
  decorators_js.state()
], exports.LuksoTimePicker.prototype, "_selectedHour", 2);
__decorateClass([
  decorators_js.state()
], exports.LuksoTimePicker.prototype, "_selectedMinute", 2);
__decorateClass([
  decorators_js.state()
], exports.LuksoTimePicker.prototype, "_showAmPmPicker", 2);
exports.LuksoTimePicker = __decorateClass([
  safeCustomElement.safeCustomElement("lukso-time-picker")
], exports.LuksoTimePicker);
