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 } from './internals/DatePickerUtils.js';
import './internals/DatePickerCalendar.js';
import '../../md/dialog/ui-dialog.js';
import '../../md/button/ui-button.js';
import '../../md/icon-button/ui-icon-button.js';
import '../../md/icons/ui-icon.js';
/**
 * A modal date picker for selecting date ranges.
 * Extends full-screen and is ideal for date range selection like flight bookings.
 *
 * ## Features
 * - Full-screen modal interface
 * - Date range selection with visual feedback
 * - Calendar and input mode toggle
 * - Min/max date constraints
 * - Disabled dates support
 * - Accessible design with proper ARIA attributes and semantic HTML
 * - Real-time date range validation
 *
 * ## Events
 *
 * ### `date-range-change`
 * Fired when a date range is selected or changed.
 *
 * **Detail:**
 * ```typescript
 * {
 *   range: DateRange,
 *   formattedRange: {
 *     start: string | null,
 *     end: string | null
 *   }
 * }
 * ```
 *
 * ### `close`
 * Fired when the modal is closed.
 *
 * **Detail:**
 * ```typescript
 * {
 *   confirmed: boolean,
 *   range: DateRange | null
 * }
 * ```
 *
 * ## Usage
 *
 * ### Basic usage
 * ```html
 * <ui-date-picker-modal
 *   .open=${true}
 *   .selectedRange=${{ start: new Date(), end: null }}
 *   @date-range-change=${this.handleRangeChange}
 *   @close=${this.handleClose}
 * ></ui-date-picker-modal>
 * ```
 *
 * ### Custom labels and constraints
 * ```html
 * <ui-date-picker-modal
 *   title="Select travel dates"
 *   startLabel="Check-in"
 *   endLabel="Check-out"
 *   .minDate=${new Date()}
 *   .maxDate=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}
 *   .disabledDates=${[new Date('2024-12-25')]}
 * ></ui-date-picker-modal>
 * ```
 *
 * ### With mode toggle disabled
 * ```html
 * <ui-date-picker-modal
 *   .showModeToggle=${false}
 * ></ui-date-picker-modal>
 * ```
 */
let UiDatePickerModal = (() => {
    let _classDecorators = [customElement('ui-date-picker-modal')];
    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 _startLabel_decorators;
    let _startLabel_initializers = [];
    let _startLabel_extraInitializers = [];
    let _endLabel_decorators;
    let _endLabel_initializers = [];
    let _endLabel_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 _disabledDates_decorators;
    let _disabledDates_initializers = [];
    let _disabledDates_extraInitializers = [];
    let _locale_decorators;
    let _locale_initializers = [];
    let _locale_extraInitializers = [];
    let _showModeToggle_decorators;
    let _showModeToggle_initializers = [];
    let _showModeToggle_extraInitializers = [];
    let _isInputMode_decorators;
    let _isInputMode_initializers = [];
    let _isInputMode_extraInitializers = [];
    var UiDatePickerModal = 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 })];
            _startLabel_decorators = [property({ type: String })];
            _endLabel_decorators = [property({ type: String })];
            _selectedRange_decorators = [property({ type: Object })];
            _minDate_decorators = [property({ type: Object })];
            _maxDate_decorators = [property({ type: Object })];
            _disabledDates_decorators = [property({ type: Array })];
            _locale_decorators = [property({ type: String })];
            _showModeToggle_decorators = [property({ type: Boolean })];
            _isInputMode_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, _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, _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, _disabledDates_decorators, { kind: "accessor", name: "disabledDates", static: false, private: false, access: { has: obj => "disabledDates" in obj, get: obj => obj.disabledDates, set: (obj, value) => { obj.disabledDates = value; } }, metadata: _metadata }, _disabledDates_initializers, _disabledDates_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, _showModeToggle_decorators, { kind: "accessor", name: "showModeToggle", static: false, private: false, access: { has: obj => "showModeToggle" in obj, get: obj => obj.showModeToggle, set: (obj, value) => { obj.showModeToggle = value; } }, metadata: _metadata }, _showModeToggle_initializers, _showModeToggle_extraInitializers);
            __esDecorate(this, null, _isInputMode_decorators, { kind: "accessor", name: "isInputMode", static: false, private: false, access: { has: obj => "isInputMode" in obj, get: obj => obj.isInputMode, set: (obj, value) => { obj.isInputMode = value; } }, metadata: _metadata }, _isInputMode_initializers, _isInputMode_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            UiDatePickerModal = _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, 'Select dates'
        /**
         * Label for the start date
         */
        ));
        /**
         * The modal title
         */
        get title() { return this.#title_accessor_storage; }
        set title(value) { this.#title_accessor_storage = value; }
        #startLabel_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _startLabel_initializers, 'Start date'
        /**
         * Label for the end date
         */
        ));
        /**
         * Label for the start 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'
        /**
         * The selected date range
         */
        ));
        /**
         * Label for the end date
         */
        get endLabel() { return this.#endLabel_accessor_storage; }
        set endLabel(value) { this.#endLabel_accessor_storage = value; }
        #selectedRange_accessor_storage = (__runInitializers(this, _endLabel_extraInitializers), __runInitializers(this, _selectedRange_initializers, null
        /**
         * Minimum selectable date
         */
        ));
        /**
         * The selected date range
         */
        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
        /**
         * Array of disabled dates
         */
        ));
        /**
         * Maximum selectable date
         */
        get maxDate() { return this.#maxDate_accessor_storage; }
        set maxDate(value) { this.#maxDate_accessor_storage = value; }
        #disabledDates_accessor_storage = (__runInitializers(this, _maxDate_extraInitializers), __runInitializers(this, _disabledDates_initializers, undefined
        /**
         * Locale for date formatting
         */
        ));
        /**
         * Array of disabled dates
         */
        get disabledDates() { return this.#disabledDates_accessor_storage; }
        set disabledDates(value) { this.#disabledDates_accessor_storage = value; }
        #locale_accessor_storage = (__runInitializers(this, _disabledDates_extraInitializers), __runInitializers(this, _locale_initializers, undefined
        /**
         * Whether to show edit/calendar toggle button
         */
        ));
        /**
         * Locale for date formatting
         */
        get locale() { return this.#locale_accessor_storage; }
        set locale(value) { this.#locale_accessor_storage = value; }
        #showModeToggle_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _showModeToggle_initializers, true));
        /**
         * Whether to show edit/calendar toggle button
         */
        get showModeToggle() { return this.#showModeToggle_accessor_storage; }
        set showModeToggle(value) { this.#showModeToggle_accessor_storage = value; }
        #isInputMode_accessor_storage = (__runInitializers(this, _showModeToggle_extraInitializers), __runInitializers(this, _isInputMode_initializers, false));
        get isInputMode() { return this.#isInputMode_accessor_storage; }
        set isInputMode(value) { this.#isInputMode_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _isInputMode_extraInitializers);
            // Initialize boolean properties to false as per Lit best practices
            this.open = false;
            this.showModeToggle = true;
        }
        handleRangeSelect(event) {
            this.selectedRange = event.detail.range;
            this.dispatchChangeEvent();
        }
        handleCancel() {
            this.dispatchCloseEvent(false);
        }
        handleConfirm() {
            this.dispatchCloseEvent(true);
        }
        handleModeToggle() {
            this.isInputMode = !this.isInputMode;
        }
        dispatchChangeEvent() {
            if (!this.selectedRange)
                return;
            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-range-change', {
                detail: event,
                bubbles: true,
                composed: true,
            }));
        }
        dispatchCloseEvent(confirmed) {
            this.dispatchEvent(new CustomEvent('close', {
                detail: {
                    confirmed,
                    range: confirmed ? this.selectedRange : null,
                },
                bubbles: true,
                composed: true,
            }));
        }
        renderHeader() {
            return html `
      <header class="modal-header">
        <h2 id="modal-title" class="modal-title">${this.title}</h2>
        <div class="header-actions">
          ${this.showModeToggle
                ? html `
                <ui-icon-button
                  @click=${this.handleModeToggle}
                  aria-label=${this.isInputMode ? 'Show calendar' : 'Show date input'}
                  title=${this.isInputMode ? 'Show calendar' : 'Show date input'}
                >
                  <ui-icon icon=${this.isInputMode ? 'calendarToday' : 'edit'}></ui-icon>
                </ui-icon-button>
              `
                : ''}
          <ui-icon-button @click=${this.handleCancel} aria-label="Close" title="Close">
            <ui-icon icon="close"></ui-icon>
          </ui-icon-button>
        </div>
      </header>
    `;
        }
        renderDateDisplay() {
            const startDate = this.selectedRange?.start;
            const endDate = this.selectedRange?.end;
            return html `
      <section class="date-range-display" role="status" aria-live="polite" aria-label="Selected date range">
        <div class="date-display">
          <div class="date-label" id="start-label">${this.startLabel}</div>
          <div class="date-value" aria-labelledby="start-label" aria-describedby="start-description">
            ${startDate ? formatDate(startDate, this.locale) : 'Select date'}
          </div>
          <div id="start-description" class="visually-hidden">
            ${startDate ? `Start date selected: ${formatDate(startDate, this.locale)}` : 'No start date selected'}
          </div>
        </div>
        <div class="date-separator" aria-hidden="true">—</div>
        <div class="date-display">
          <div class="date-label" id="end-label">${this.endLabel}</div>
          <div class="date-value" aria-labelledby="end-label" aria-describedby="end-description">
            ${endDate ? formatDate(endDate, this.locale) : 'Select date'}
          </div>
          <div id="end-description" class="visually-hidden">
            ${endDate ? `End date selected: ${formatDate(endDate, this.locale)}` : 'No end date selected'}
          </div>
        </div>
      </section>
    `;
        }
        renderCalendar() {
            const currentDate = this.selectedRange?.start || new Date();
            return html `
      <ui-date-picker-calendar
        .year=${currentDate.getFullYear()}
        .month=${currentDate.getMonth()}
        .rangeStart=${this.selectedRange?.start || null}
        .rangeEnd=${this.selectedRange?.end || null}
        .rangeSelection=${true}
        .minDate=${this.minDate}
        .maxDate=${this.maxDate}
        .disabledDates=${this.disabledDates}
        .locale=${this.locale}
        @date-range-select=${this.handleRangeSelect}
      ></ui-date-picker-calendar>
    `;
        }
        renderInputMode() {
            return html `
      <section class="input-mode-placeholder" role="status" aria-live="polite">
        <ui-icon icon="edit" class="input-mode-icon" aria-hidden="true"></ui-icon>
        <h3>Manual date input mode</h3>
        <p>This feature can be enhanced with date input fields for direct text entry</p>
        <p><em>Use the calendar toggle button to return to calendar view</em></p>
      </section>
    `;
        }
        renderContent() {
            return html `
      <main id="modal-content" class="modal-content">
        ${this.renderDateDisplay()} ${this.isInputMode ? this.renderInputMode() : this.renderCalendar()}
      </main>
    `;
        }
        renderActions() {
            const hasValidRange = this.selectedRange?.start && this.selectedRange?.end;
            return html `
      <footer class="modal-actions" role="group" aria-label="Date picker actions">
        <ui-button color="text" @click=${this.handleCancel} aria-describedby="cancel-description"> Cancel </ui-button>
        <ui-button
          color="filled"
          @click=${this.handleConfirm}
          .disabled=${!hasValidRange}
          aria-describedby="confirm-description"
        >
          Confirm
        </ui-button>
        <div id="cancel-description" class="visually-hidden">Close the date picker without saving changes</div>
        <div id="confirm-description" class="visually-hidden">
          ${hasValidRange
                ? 'Save the selected date range and close the picker'
                : 'Select both start and end dates to confirm the selection'}
        </div>
      </footer>
    `;
        }
        render() {
            return html `
      <ui-dialog
        .open=${this.open}
        @close=${this.handleCancel}
        role="dialog"
        aria-labelledby="modal-title"
        aria-describedby="modal-content"
      >
        ${this.renderHeader()} ${this.renderContent()} ${this.renderActions()}
      </ui-dialog>
    `;
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return UiDatePickerModal = _classThis;
})();
export { UiDatePickerModal };
//# sourceMappingURL=ui-date-picker-modal.js.map