/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html, } from 'lit';
import { customElement, query, property } from 'lit/decorators.js';
import { styles } from './nile-date-picker.css';
import NileElement from '../internal/nile-element';
/**
 * Nile icon component.
 *
 * @tag nile-date-picker
 *
 */
import { formatDateToFormat, parseRangeFromFormat, normalizeDateRange } from './nile-date-picker-utils';
let NileDatePicker = class NileDatePicker extends NileElement {
    constructor() {
        super(...arguments);
        this.range = false;
        this.hideTypes = false;
        this.doubleClickUnselect = false;
        this.allowClear = false;
        this.open = false;
        this.hideTimeZone = false;
        this.type = 'absolute';
        this.showManualInputs = false;
        this.hideDurationFields = [];
        this.allowedDates = '{}';
        this.syncDatePicker = false;
        this.dateFormat = "DD/MM/YYYY";
        this.rangeSeparator = " - ";
        this.showYearDropdown = false;
        this.showMonthDropdown = false;
        this.portal = false;
        this.disabled = false;
    }
    /**
    * The styles for DatePicker
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
    */
    static get styles() {
        return [styles];
    }
    /**
      * Render method
      * @slot This is a slot test
      */
    firstUpdated() {
        super.firstUpdated?.(new Map());
        if (!this.syncDatePicker)
            return;
        const input = this.querySelector("nile-input");
        if (!input)
            return;
        input.addEventListener("nile-input", (e) => {
            const text = e.detail.value;
            const { first, second } = parseRangeFromFormat(text, this.dateFormat, this.range, this.rangeSeparator);
            if (!this.range) {
                if (first)
                    this.jumpTo(first);
                return;
            }
            if (first && !second) {
                this.jumpTo(first);
                this.syncRangeCalendar(first, null);
            }
            if (first && second) {
                const [start, end] = normalizeDateRange(first, second);
                if (end)
                    this.jumpTo(end);
                this.syncRangeCalendar(start, end);
            }
        });
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (changedProperties.has('disabled')) {
            this.updateTriggerDisabledState();
        }
    }
    updateTriggerDisabledState() {
        const trigger = this.querySelector('[slot="trigger"]');
        if (!trigger)
            return;
        if ('disabled' in trigger) {
            trigger.disabled = this.disabled;
        }
    }
    jumpTo(date) {
        this.open = true;
        const cal = this.shadowRoot.querySelector("nile-calendar");
        if (!cal)
            return;
        cal.currentYear = date.getFullYear();
        cal.currentMonth = date.getMonth();
        cal.value = date;
        cal.valueAttribute = date.toISOString();
    }
    syncRangeCalendar(first, second) {
        const cal = this.shadowRoot.querySelector("nile-calendar");
        if (!cal)
            return;
        if (!this.range)
            return;
        if (first)
            cal.startDate = first;
        if (second)
            cal.endDate = second;
    }
    render() {
        return html `
      <nile-dropdown ?disabled="${this.disabled}" .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base" .portal="${this.portal}">
        <slot slot="trigger" part="trigger" name="trigger"></slot>  

        <nile-calendar
          .hideTypes="${this.hideTypes}"
          .type="${this.type}"
          value="${this.value}"
          .range="${this.range}"
          @nile-init="${(e) => e.stopPropagation()}"
          @nile-destroy="${(e) => e.stopPropagation()}"
          @nile-changed="${(e) => e.stopPropagation()}"

          @nile-change="${this.handleChanged}"

          .allowedDates="${this.allowedDates}"

          @nile-type-change="${(e) => { e.stopPropagation(); this.emit('nile-type-change', e.detail); }}"
          @nile-clear="${(e) => { e.stopPropagation(); this.emit('nile-clear'); }}"
          .hideDurationFields="${this.hideDurationFields}"
          .showManualInputs="${this.showManualInputs}"
          .doubleClickUnselect="${this.doubleClickUnselect}"
          .allowClear="${this.allowClear}"
          .startYear="${this.startYear}"
          .endYear="${this.endYear}"
          ?showYearDropdown="${this.showYearDropdown}"
          ?showMonthDropdown="${this.showMonthDropdown}"
          .dateFormat="${this.dateFormat}"
        ></nile-calendar>
      </nile-dropdown>
    `;
    }
    handleChanged(event) {
        event.stopPropagation();
        const detail = event.detail;
        const triggerInput = this.querySelector("nile-input");
        if (this.disabled)
            return;
        if (!this.range) {
            const picked = detail.value;
            if (picked && triggerInput) {
                triggerInput.value = formatDateToFormat(new Date(picked), this.dateFormat);
                triggerInput.emit("nile-input", { value: triggerInput.value });
            }
            this.emit('nile-changed', event.detail);
            this.emit('nile-change', event.detail);
            this.dropdown?.hide();
            return;
        }
        const start = detail.startDate;
        const end = detail.endDate;
        if (triggerInput) {
            let text = "";
            if (start)
                text += formatDateToFormat(new Date(start), this.dateFormat);
            if (start && end)
                text += " - " + formatDateToFormat(new Date(end), this.dateFormat);
            triggerInput.value = text;
            triggerInput.emit("nile-input", { value: text });
        }
        this.emit('nile-changed', event.detail);
        this.emit('nile-change', event.detail);
        if (this.dropdown) {
            this.dropdown.hide();
        }
    }
    connectedCallback() {
        super.connectedCallback();
        this.emit('nile-init');
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.emit('nile-destroy');
    }
};
__decorate([
    property({ type: Boolean })
], NileDatePicker.prototype, "range", void 0);
__decorate([
    property({ type: Boolean })
], NileDatePicker.prototype, "hideTypes", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileDatePicker.prototype, "doubleClickUnselect", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileDatePicker.prototype, "allowClear", void 0);
__decorate([
    property({ type: Boolean })
], NileDatePicker.prototype, "open", void 0);
__decorate([
    property({ type: Boolean, attribute: 'hide-time-zone' })
], NileDatePicker.prototype, "hideTimeZone", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileDatePicker.prototype, "type", void 0);
__decorate([
    property({ type: Boolean, attribute: 'showManualInputs' })
], NileDatePicker.prototype, "showManualInputs", void 0);
__decorate([
    property()
], NileDatePicker.prototype, "value", void 0);
__decorate([
    property({ type: Array, attribute: 'hide-duration-fields' })
], NileDatePicker.prototype, "hideDurationFields", void 0);
__decorate([
    property({ attribute: 'allowedDates' })
], NileDatePicker.prototype, "allowedDates", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileDatePicker.prototype, "syncDatePicker", void 0);
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileDatePicker.prototype, "dateFormat", void 0);
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileDatePicker.prototype, "rangeSeparator", void 0);
__decorate([
    property({ type: Number, attribute: true, reflect: true })
], NileDatePicker.prototype, "startYear", void 0);
__decorate([
    property({ type: Number, attribute: true, reflect: true })
], NileDatePicker.prototype, "endYear", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileDatePicker.prototype, "showYearDropdown", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileDatePicker.prototype, "showMonthDropdown", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileDatePicker.prototype, "portal", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileDatePicker.prototype, "disabled", void 0);
__decorate([
    query('nile-dropdown')
], NileDatePicker.prototype, "dropdown", void 0);
NileDatePicker = __decorate([
    customElement('nile-date-picker')
], NileDatePicker);
export { NileDatePicker };
export default NileDatePicker;
//# sourceMappingURL=nile-date-picker.js.map