import { __esDecorate, __runInitializers } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { modalStyles } from './internals/DatePicker.styles.js';
import { formatDate, parseDate } from './internals/DatePickerUtils.js';
import '../../md/dialog/ui-dialog.js';
import '../../md/button/ui-button.js';
import '../../md/icon-button/ui-icon-button.js';
import '../../md/text-field/ui-outlined-text-field.js';
import '../../md/icons/ui-icon.js';
/**
 * A modal date input picker for manual date entry using keyboard.
 * Ideal for compact layouts and precise date entry. Supports both single
 * date selection and date range selection modes.
 *
 * ## Features
 * - Manual date entry with keyboard input
 * - Single date and date range modes
 * - Input validation with error messages
 * - Min/max date constraints
 * - Multiple date format support (MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD)
 * - Accessible design with proper ARIA labels and semantic HTML
 * - Real-time validation feedback
 *
 * ## Events
 *
 * ### `date-input-change`
 * Fired when a valid date is entered in the input fields.
 *
 * **Detail for range mode:**
 * ```typescript
 * {
 *   range: DateRange,
 *   formattedRange: {
 *     start: string | null,
 *     end: string | null
 *   }
 * }
 * ```
 *
 * **Detail for single date mode:**
 * ```typescript
 * {
 *   date: Date,
 *   formattedDate: string
 * }
 * ```
 *
 * ### `modal-input-close`
 * Fired when the modal is closed, either by confirmation or cancellation.
 *
 * **Detail:**
 * ```typescript
 * {
 *   confirmed: boolean,
 *   date?: Date | null,     // Available in single date mode
 *   range?: DateRange | null // Available in range mode
 * }
 * ```
 *
 * ## Usage
 *
 * ### Range mode (default)
 * ```html
 * <ui-date-picker-modal-input
 *   .open=${true}
 *   .selectedRange=${{ start: new Date(), end: null }}
 *   @date-input-change=${this.handleRangeChange}
 *   @modal-input-close=${this.handleClose}
 * ></ui-date-picker-modal-input>
 * ```
 *
 * ### Single date mode
 * ```html
 * <ui-date-picker-modal-input
 *   .rangeMode=${false}
 *   .selectedDate=${new Date()}
 *   @date-input-change=${this.handleDateChange}
 *   @modal-input-close=${this.handleClose}
 * ></ui-date-picker-modal-input>
 * ```
 *
 * ### With constraints
 * ```html
 * <ui-date-picker-modal-input
 *   .minDate=${new Date('2024-01-01')}
 *   .maxDate=${new Date('2024-12-31')}
 *   .locale=${'en-US'}
 * ></ui-date-picker-modal-input>
 * ```
 */
let UiDatePickerModalInput = (() => {
    let _classDecorators = [customElement('ui-date-picker-modal-input')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = LitElement;
    let _open_decorators;
    let _open_initializers = [];
    let _open_extraInitializers = [];
    let _title_decorators;
    let _title_initializers = [];
    let _title_extraInitializers = [];
    let _rangeMode_decorators;
    let _rangeMode_initializers = [];
    let _rangeMode_extraInitializers = [];
    let _startLabel_decorators;
    let _startLabel_initializers = [];
    let _startLabel_extraInitializers = [];
    let _endLabel_decorators;
    let _endLabel_initializers = [];
    let _endLabel_extraInitializers = [];
    let _placeholder_decorators;
    let _placeholder_initializers = [];
    let _placeholder_extraInitializers = [];
    let _selectedDate_decorators;
    let _selectedDate_initializers = [];
    let _selectedDate_extraInitializers = [];
    let _selectedRange_decorators;
    let _selectedRange_initializers = [];
    let _selectedRange_extraInitializers = [];
    let _minDate_decorators;
    let _minDate_initializers = [];
    let _minDate_extraInitializers = [];
    let _maxDate_decorators;
    let _maxDate_initializers = [];
    let _maxDate_extraInitializers = [];
    let _locale_decorators;
    let _locale_initializers = [];
    let _locale_extraInitializers = [];
    let _startInput_decorators;
    let _startInput_initializers = [];
    let _startInput_extraInitializers = [];
    let _endInput_decorators;
    let _endInput_initializers = [];
    let _endInput_extraInitializers = [];
    let _startError_decorators;
    let _startError_initializers = [];
    let _startError_extraInitializers = [];
    let _endError_decorators;
    let _endError_initializers = [];
    let _endError_extraInitializers = [];
    var UiDatePickerModalInput = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _open_decorators = [property({ type: Boolean })];
            _title_decorators = [property({ type: String })];
            _rangeMode_decorators = [property({ type: Boolean })];
            _startLabel_decorators = [property({ type: String })];
            _endLabel_decorators = [property({ type: String })];
            _placeholder_decorators = [property({ type: String })];
            _selectedDate_decorators = [property({ type: Object })];
            _selectedRange_decorators = [property({ type: Object })];
            _minDate_decorators = [property({ type: Object })];
            _maxDate_decorators = [property({ type: Object })];
            _locale_decorators = [property({ type: String })];
            _startInput_decorators = [state()];
            _endInput_decorators = [state()];
            _startError_decorators = [state()];
            _endError_decorators = [state()];
            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
            __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
            __esDecorate(this, null, _rangeMode_decorators, { kind: "accessor", name: "rangeMode", static: false, private: false, access: { has: obj => "rangeMode" in obj, get: obj => obj.rangeMode, set: (obj, value) => { obj.rangeMode = value; } }, metadata: _metadata }, _rangeMode_initializers, _rangeMode_extraInitializers);
            __esDecorate(this, null, _startLabel_decorators, { kind: "accessor", name: "startLabel", static: false, private: false, access: { has: obj => "startLabel" in obj, get: obj => obj.startLabel, set: (obj, value) => { obj.startLabel = value; } }, metadata: _metadata }, _startLabel_initializers, _startLabel_extraInitializers);
            __esDecorate(this, null, _endLabel_decorators, { kind: "accessor", name: "endLabel", static: false, private: false, access: { has: obj => "endLabel" in obj, get: obj => obj.endLabel, set: (obj, value) => { obj.endLabel = value; } }, metadata: _metadata }, _endLabel_initializers, _endLabel_extraInitializers);
            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
            __esDecorate(this, null, _selectedDate_decorators, { kind: "accessor", name: "selectedDate", static: false, private: false, access: { has: obj => "selectedDate" in obj, get: obj => obj.selectedDate, set: (obj, value) => { obj.selectedDate = value; } }, metadata: _metadata }, _selectedDate_initializers, _selectedDate_extraInitializers);
            __esDecorate(this, null, _selectedRange_decorators, { kind: "accessor", name: "selectedRange", static: false, private: false, access: { has: obj => "selectedRange" in obj, get: obj => obj.selectedRange, set: (obj, value) => { obj.selectedRange = value; } }, metadata: _metadata }, _selectedRange_initializers, _selectedRange_extraInitializers);
            __esDecorate(this, null, _minDate_decorators, { kind: "accessor", name: "minDate", static: false, private: false, access: { has: obj => "minDate" in obj, get: obj => obj.minDate, set: (obj, value) => { obj.minDate = value; } }, metadata: _metadata }, _minDate_initializers, _minDate_extraInitializers);
            __esDecorate(this, null, _maxDate_decorators, { kind: "accessor", name: "maxDate", static: false, private: false, access: { has: obj => "maxDate" in obj, get: obj => obj.maxDate, set: (obj, value) => { obj.maxDate = value; } }, metadata: _metadata }, _maxDate_initializers, _maxDate_extraInitializers);
            __esDecorate(this, null, _locale_decorators, { kind: "accessor", name: "locale", static: false, private: false, access: { has: obj => "locale" in obj, get: obj => obj.locale, set: (obj, value) => { obj.locale = value; } }, metadata: _metadata }, _locale_initializers, _locale_extraInitializers);
            __esDecorate(this, null, _startInput_decorators, { kind: "accessor", name: "startInput", static: false, private: false, access: { has: obj => "startInput" in obj, get: obj => obj.startInput, set: (obj, value) => { obj.startInput = value; } }, metadata: _metadata }, _startInput_initializers, _startInput_extraInitializers);
            __esDecorate(this, null, _endInput_decorators, { kind: "accessor", name: "endInput", static: false, private: false, access: { has: obj => "endInput" in obj, get: obj => obj.endInput, set: (obj, value) => { obj.endInput = value; } }, metadata: _metadata }, _endInput_initializers, _endInput_extraInitializers);
            __esDecorate(this, null, _startError_decorators, { kind: "accessor", name: "startError", static: false, private: false, access: { has: obj => "startError" in obj, get: obj => obj.startError, set: (obj, value) => { obj.startError = value; } }, metadata: _metadata }, _startError_initializers, _startError_extraInitializers);
            __esDecorate(this, null, _endError_decorators, { kind: "accessor", name: "endError", static: false, private: false, access: { has: obj => "endError" in obj, get: obj => obj.endError, set: (obj, value) => { obj.endError = value; } }, metadata: _metadata }, _endError_initializers, _endError_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            UiDatePickerModalInput = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static styles = modalStyles;
        #open_accessor_storage = __runInitializers(this, _open_initializers, false
        /**
         * The modal title
         */
        );
        /**
         * Whether the modal is open
         */
        get open() { return this.#open_accessor_storage; }
        set open(value) { this.#open_accessor_storage = value; }
        #title_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _title_initializers, 'Enter dates'
        /**
         * Whether to use range mode (two date inputs) or single date mode
         */
        ));
        /**
         * The modal title
         */
        get title() { return this.#title_accessor_storage; }
        set title(value) { this.#title_accessor_storage = value; }
        #rangeMode_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _rangeMode_initializers, false
        /**
         * Label for the start date (or single date)
         */
        ));
        /**
         * Whether to use range mode (two date inputs) or single date mode
         */
        get rangeMode() { return this.#rangeMode_accessor_storage; }
        set rangeMode(value) { this.#rangeMode_accessor_storage = value; }
        #startLabel_accessor_storage = (__runInitializers(this, _rangeMode_extraInitializers), __runInitializers(this, _startLabel_initializers, 'Start date'
        /**
         * Label for the end date (only used in range mode)
         */
        ));
        /**
         * Label for the start date (or single date)
         */
        get startLabel() { return this.#startLabel_accessor_storage; }
        set startLabel(value) { this.#startLabel_accessor_storage = value; }
        #endLabel_accessor_storage = (__runInitializers(this, _startLabel_extraInitializers), __runInitializers(this, _endLabel_initializers, 'End date'
        /**
         * Placeholder for date inputs
         */
        ));
        /**
         * Label for the end date (only used in range mode)
         */
        get endLabel() { return this.#endLabel_accessor_storage; }
        set endLabel(value) { this.#endLabel_accessor_storage = value; }
        #placeholder_accessor_storage = (__runInitializers(this, _endLabel_extraInitializers), __runInitializers(this, _placeholder_initializers, 'MM/DD/YYYY'
        /**
         * The selected date (single mode)
         */
        ));
        /**
         * Placeholder for date inputs
         */
        get placeholder() { return this.#placeholder_accessor_storage; }
        set placeholder(value) { this.#placeholder_accessor_storage = value; }
        #selectedDate_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _selectedDate_initializers, null
        /**
         * The selected date range (range mode)
         */
        ));
        /**
         * The selected date (single mode)
         */
        get selectedDate() { return this.#selectedDate_accessor_storage; }
        set selectedDate(value) { this.#selectedDate_accessor_storage = value; }
        #selectedRange_accessor_storage = (__runInitializers(this, _selectedDate_extraInitializers), __runInitializers(this, _selectedRange_initializers, null
        /**
         * Minimum selectable date
         */
        ));
        /**
         * The selected date range (range mode)
         */
        get selectedRange() { return this.#selectedRange_accessor_storage; }
        set selectedRange(value) { this.#selectedRange_accessor_storage = value; }
        #minDate_accessor_storage = (__runInitializers(this, _selectedRange_extraInitializers), __runInitializers(this, _minDate_initializers, undefined
        /**
         * Maximum selectable date
         */
        ));
        /**
         * Minimum selectable date
         */
        get minDate() { return this.#minDate_accessor_storage; }
        set minDate(value) { this.#minDate_accessor_storage = value; }
        #maxDate_accessor_storage = (__runInitializers(this, _minDate_extraInitializers), __runInitializers(this, _maxDate_initializers, undefined
        /**
         * Locale for date formatting
         */
        ));
        /**
         * Maximum selectable date
         */
        get maxDate() { return this.#maxDate_accessor_storage; }
        set maxDate(value) { this.#maxDate_accessor_storage = value; }
        #locale_accessor_storage = (__runInitializers(this, _maxDate_extraInitializers), __runInitializers(this, _locale_initializers, undefined));
        /**
         * Locale for date formatting
         */
        get locale() { return this.#locale_accessor_storage; }
        set locale(value) { this.#locale_accessor_storage = value; }
        #startInput_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _startInput_initializers, ''));
        get startInput() { return this.#startInput_accessor_storage; }
        set startInput(value) { this.#startInput_accessor_storage = value; }
        #endInput_accessor_storage = (__runInitializers(this, _startInput_extraInitializers), __runInitializers(this, _endInput_initializers, ''));
        get endInput() { return this.#endInput_accessor_storage; }
        set endInput(value) { this.#endInput_accessor_storage = value; }
        #startError_accessor_storage = (__runInitializers(this, _endInput_extraInitializers), __runInitializers(this, _startError_initializers, ''));
        get startError() { return this.#startError_accessor_storage; }
        set startError(value) { this.#startError_accessor_storage = value; }
        #endError_accessor_storage = (__runInitializers(this, _startError_extraInitializers), __runInitializers(this, _endError_initializers, ''));
        get endError() { return this.#endError_accessor_storage; }
        set endError(value) { this.#endError_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _endError_extraInitializers);
            // Initialize boolean properties to false first, then set intended defaults
            this.open = false;
            this.rangeMode = true; // Default to range mode as documented
        }
        connectedCallback() {
            super.connectedCallback();
            this.updateInputValues();
        }
        willUpdate(changedProperties) {
            if (changedProperties.has('selectedDate') || changedProperties.has('selectedRange')) {
                this.updateInputValues();
            }
        }
        updateInputValues() {
            if (this.rangeMode && this.selectedRange) {
                this.startInput = this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : '';
                this.endInput = this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : '';
            }
            else if (!this.rangeMode && this.selectedDate) {
                this.startInput = formatDate(this.selectedDate, this.locale);
            }
        }
        validateDate(dateString, isEndDate = false) {
            if (!dateString.trim())
                return null;
            const parsedDate = parseDate(dateString);
            if (!parsedDate)
                return null;
            // Check min/max constraints
            if (this.minDate && parsedDate < this.minDate)
                return null;
            if (this.maxDate && parsedDate > this.maxDate)
                return null;
            // For range mode, validate end date is after start date
            if (this.rangeMode && isEndDate) {
                const startDate = parseDate(this.startInput);
                if (startDate && parsedDate < startDate)
                    return null;
            }
            return parsedDate;
        }
        handleStartInput(event) {
            const target = event.target;
            this.startInput = target.value;
            this.startError = '';
            if (this.startInput.trim()) {
                const date = this.validateDate(this.startInput);
                if (!date) {
                    this.startError = 'Invalid date format or out of range';
                    return;
                }
                if (this.rangeMode) {
                    const currentRange = this.selectedRange || { start: null, end: null };
                    this.selectedRange = { ...currentRange, start: date };
                }
                else {
                    this.selectedDate = date;
                }
                this.dispatchChangeEvent();
            }
        }
        handleEndInput(event) {
            const target = event.target;
            this.endInput = target.value;
            this.endError = '';
            if (this.endInput.trim()) {
                const date = this.validateDate(this.endInput, true);
                if (!date) {
                    this.endError = 'Invalid date format, out of range, or before start date';
                    return;
                }
                const currentRange = this.selectedRange || { start: null, end: null };
                this.selectedRange = { ...currentRange, end: date };
                this.dispatchChangeEvent();
            }
        }
        handleCancel() {
            this.dispatchCloseEvent(false);
        }
        handleConfirm() {
            // Validate all inputs before confirming
            let hasErrors = false;
            if (this.rangeMode) {
                if (!this.startInput.trim()) {
                    this.startError = 'Start date is required';
                    hasErrors = true;
                }
                else if (!this.validateDate(this.startInput)) {
                    this.startError = 'Invalid start date';
                    hasErrors = true;
                }
                if (!this.endInput.trim()) {
                    this.endError = 'End date is required';
                    hasErrors = true;
                }
                else if (!this.validateDate(this.endInput, true)) {
                    this.endError = 'Invalid end date';
                    hasErrors = true;
                }
            }
            else {
                if (!this.startInput.trim()) {
                    this.startError = 'Date is required';
                    hasErrors = true;
                }
                else if (!this.validateDate(this.startInput)) {
                    this.startError = 'Invalid date';
                    hasErrors = true;
                }
            }
            if (!hasErrors) {
                this.dispatchCloseEvent(true);
            }
        }
        dispatchChangeEvent() {
            if (this.rangeMode && this.selectedRange) {
                const event = {
                    range: this.selectedRange,
                    formattedRange: {
                        start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,
                        end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,
                    },
                };
                this.dispatchEvent(new CustomEvent('date-input-change', {
                    detail: event,
                    bubbles: true,
                    composed: true,
                }));
            }
            else if (!this.rangeMode && this.selectedDate) {
                this.dispatchEvent(new CustomEvent('date-input-change', {
                    detail: {
                        date: this.selectedDate,
                        formattedDate: formatDate(this.selectedDate, this.locale),
                    },
                    bubbles: true,
                    composed: true,
                }));
            }
        }
        dispatchCloseEvent(confirmed) {
            this.dispatchEvent(new CustomEvent('modal-input-close', {
                detail: {
                    confirmed,
                    date: confirmed && !this.rangeMode ? this.selectedDate : null,
                    range: confirmed && this.rangeMode ? this.selectedRange : null,
                },
                bubbles: true,
                composed: true,
            }));
        }
        renderHeader() {
            return html `
      <header class="modal-header">
        <h2 id="modal-title" class="modal-title">${this.title}</h2>
        <ui-icon-button @click=${this.handleCancel} aria-label="Close" title="Close">
          <ui-icon icon="close"></ui-icon>
        </ui-icon-button>
      </header>
    `;
        }
        renderInputs() {
            return html `
      <main class="modal-content">
        <div class="input-container" role="form" aria-labelledby="modal-title">
          <fieldset>
            <legend class="visually-hidden">${this.rangeMode ? 'Enter date range' : 'Enter date'}</legend>

            <ui-outlined-text-field
              .label=${this.rangeMode ? this.startLabel : 'Date'}
              .placeholder=${this.placeholder}
              .value=${this.startInput}
              .invalidText=${this.startError}
              ?invalid=${!!this.startError}
              @input=${this.handleStartInput}
              required
              aria-describedby="format-help"
            >
              <ui-icon slot="suffix" icon="calendarToday"></ui-icon>
            </ui-outlined-text-field>

            ${this.rangeMode
                ? html `
                  <ui-outlined-text-field
                    .label=${this.endLabel}
                    .placeholder=${this.placeholder}
                    .value=${this.endInput}
                    .invalidText=${this.endError}
                    ?invalid=${!!this.endError}
                    @input=${this.handleEndInput}
                    required
                    aria-describedby="format-help"
                  >
                    <ui-icon slot="suffix" icon="calendarToday"></ui-icon>
                  </ui-outlined-text-field>
                `
                : ''}
          </fieldset>

          <aside id="format-help" class="format-help" role="note" aria-label="Date format information">
            <p class="help-title">
              <strong>Supported formats:</strong><br />
              MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD
            </p>
            <p class="help-examples"><strong>Examples:</strong> 12/25/2024, 12-25-2024, 2024-12-25</p>
          </aside>
        </div>
      </main>
    `;
        }
        renderActions() {
            const hasValidInput = this.rangeMode
                ? this.startInput.trim() && this.endInput.trim() && !this.startError && !this.endError
                : this.startInput.trim() && !this.startError;
            return html `
      <footer class="modal-actions">
        <ui-button color="text" @click=${this.handleCancel}>Cancel</ui-button>
        <ui-button color="filled" @click=${this.handleConfirm} .disabled=${!hasValidInput}> Confirm </ui-button>
      </footer>
    `;
        }
        render() {
            return html `
      <ui-dialog .open=${this.open} @close=${this.handleCancel}>
        ${this.renderHeader()} ${this.renderInputs()} ${this.renderActions()}
      </ui-dialog>
    `;
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return UiDatePickerModalInput = _classThis;
})();
export { UiDatePickerModalInput };
//# sourceMappingURL=ui-date-picker-modal-input.js.map