import { h } from "@stencil/core";
import { getMonthDays, getDaysFromPreviousMonth, getDaysFromNextMonth, defaultStaticRanges, compareDatesWithoutTime, validateInputDate, } from "./dateUtils";
export class DgaDatepicker {
    constructor() {
        this.initialDate = new Date();
        this.range = false;
        this.dualMonthView = false;
        this.inputField = false;
        this.submitButton = false;
        this.qickOptions = false;
        // @Prop() onChange?: (event?: any) => void = () => { };
        // value;
        // onChange = () => {};
        // @Prop() onSubmit = () => {};
        // @Prop() onCancel = () => {};
        this.onSubmit = () => { };
        this.onCancel = () => { };
        this.currentMonth = this.initialDate;
        // @State() selectedDate: Date | null = null;
        this.selectedDate = this.value || new Date();
        this.rangeDates = {};
        this.inputDates = {
            startDate: '',
            endDate: '',
        };
        this.handlePrevClick = () => {
            const prevMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
            // this.monthChange.emit(prevMonth);
            this.handleChangeMonth(prevMonth);
        };
        this.handleNextClick = () => {
            const nextMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 1);
            // this.monthChange.emit(nextMonth);
            this.handleChangeMonth(nextMonth);
        };
    }
    watchSelectedDate(newDate, oldDate) {
        if (newDate !== oldDate) {
            // this.onChange(newDate);
            this.change.emit(newDate);
        }
    }
    watchValue(newValue, oldValue) {
        if (newValue !== oldValue && newValue != this.selectedDate) {
            this.selectedDate = newValue;
            this.currentMonth = new Date(newValue.getFullYear(), newValue.getMonth(), 1);
        }
    }
    get nextMonth() {
        return new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
    }
    get days() {
        return [
            ...getDaysFromPreviousMonth(this.currentMonth).slice(0, 2),
            ...getMonthDays(this.currentMonth),
            ...getDaysFromNextMonth(this.currentMonth).slice(0, 2),
        ];
    }
    get nextMonthDays() {
        return [
            ...getDaysFromPreviousMonth(this.nextMonth).slice(0, 2),
            ...getMonthDays(this.nextMonth),
            ...getDaysFromNextMonth(this.nextMonth).slice(0, 2),
        ];
    }
    formatDate(date) {
        if (!date)
            return '';
        const dateObj = new Date(date);
        const monthNames = [
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December',
        ];
        return `${monthNames[dateObj.getMonth()]} ${dateObj.getDate()}, ${dateObj.getFullYear()}`;
    }
    handleSelectDate(date) {
        if (this.range) {
            if (!this.rangeDates.startDate) {
                this.rangeDates = { startDate: date };
            }
            else if (!this.rangeDates.endDate) {
                if (date >= this.rangeDates.startDate) {
                    this.rangeDates = Object.assign(Object.assign({}, this.rangeDates), { endDate: date });
                }
                else {
                    this.rangeDates = { startDate: date };
                }
            }
            else {
                this.rangeDates = { startDate: date, endDate: null };
            }
        }
        else {
            this.selectedDate = date;
        }
    }
    handleInputDate(event) {
        const inputElement = event.target;
        const { name, value } = inputElement;
        this.inputDates = Object.assign(Object.assign({}, this.inputDates), { [name]: value });
    }
    handleChangeMonth(newMonth) {
        this.currentMonth = newMonth;
    }
    isMidRange(date) {
        if (this.range && this.rangeDates.startDate && this.rangeDates.endDate) {
            return date > this.rangeDates.startDate && date < this.rangeDates.endDate;
        }
        return false;
    }
    isFirstRangeChild(date) {
        if (this.range && this.rangeDates.startDate && this.rangeDates.endDate) {
            return this.rangeDates.startDate.getTime() !== this.rangeDates.endDate.getTime()
                && date.getTime() === this.rangeDates.startDate.getTime();
        }
        return false;
    }
    isLastRangeChild(date) {
        if (this.range && this.rangeDates.startDate && this.rangeDates.endDate) {
            return this.rangeDates.startDate.getTime() !== this.rangeDates.endDate.getTime()
                && date.getTime() === this.rangeDates.endDate.getTime();
        }
        return false;
    }
    componentDidLoad() {
        if (this.inputField) {
            if (this.rangeDates.startDate) {
                this.inputDates = Object.assign(Object.assign({}, this.inputDates), { startDate: this.formatDate(this.rangeDates.startDate) });
            }
            if (this.rangeDates.endDate) {
                this.inputDates = Object.assign(Object.assign({}, this.inputDates), { endDate: this.formatDate(this.rangeDates.endDate) });
            }
            else {
                this.inputDates = Object.assign(Object.assign({}, this.inputDates), { endDate: '' });
            }
        }
    }
    render() {
        return (h("div", { key: '4baaa26a6c30dcccc021748661f72bd2dae1fb75', class: "date-picker-root dga-flex-column", "data-dual-view": this.dualMonthView }, h("div", { key: '80f484e2cb057556fbf3bad05e57b760a5969abd', class: "flex" }, this.qickOptions && this.range && (h("div", { key: '087f4da4763f55cf628b7c0935527b43c80a3479', class: "date-picker-root__quick-options" }, h("span", { key: '9fee9540b0bbe3707934030c31144b4910b8faee', class: "text-md-regular" }, "Qick options"), h("ul", { key: '2f12a935af2a0a98e388a4d768884b4b08b882d9', class: "options-list" }, defaultStaticRanges.map(({ label, range }) => (h("li", { key: label }, h("button", { class: "text-md-medium", onClick: () => this.rangeDates = range }, label))))))), h("div", { key: '6ca04fd773dcf97e7ac09d9a7a25e7db95942241', class: "date-picker-root__main" }, this.inputField && (h("div", { key: '5e61dffdba97e450d07434d104a187acab072001', class: "date-picker-root__main__inputs" }, h("dga-text-input", { key: '412d9237fe481eea7747ec710634e186d3e673b3', placeholder: "Month DD, YYYY", name: "startDate", value: this.inputDates.startDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
                if (validateInputDate(e.target.value)) {
                    const date = new Date(e.target.value);
                    if (this.range) {
                        if (!this.rangeDates.startDate) {
                            this.rangeDates = { startDate: date };
                        }
                        else if (this.rangeDates.endDate) {
                            if (date >= this.rangeDates.endDate) {
                                this.rangeDates = { startDate: date, endDate: date };
                            }
                            else {
                                this.rangeDates = Object.assign(Object.assign({}, this.rangeDates), { startDate: date });
                            }
                        }
                        else {
                            this.rangeDates = { startDate: date, endDate: null };
                        }
                    }
                    else {
                        this.selectedDate = date;
                    }
                }
            } }), this.range && (h("dga-text-input", { key: 'bba975f4f1b2de408e67448d5c44b9636430828d', placeholder: "Month DD, YYYY", name: "endDate", value: this.inputDates.endDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
                if (validateInputDate(e.target.value)) {
                    const date = new Date(e.target.value);
                    if (this.range) {
                        if (!this.rangeDates.endDate) {
                            if (!this.rangeDates.startDate) {
                                this.rangeDates = { startDate: date, endDate: null };
                            }
                            else if (date <= this.rangeDates.startDate) {
                                this.rangeDates = {
                                    startDate: date,
                                    endDate: this.rangeDates.startDate,
                                };
                            }
                        }
                        else if (this.rangeDates.startDate) {
                            if (date <= this.rangeDates.startDate) {
                                this.rangeDates = {
                                    startDate: date,
                                    endDate: this.rangeDates.startDate,
                                };
                            }
                            else {
                                this.rangeDates = Object.assign(Object.assign({}, this.rangeDates), { endDate: date });
                            }
                        }
                        else {
                            this.rangeDates = { startDate: date, endDate: null };
                        }
                    }
                    else {
                        this.selectedDate = date;
                    }
                }
            } })))), h("div", { key: '45957def834fe05410727802792e4e2769462d7f', class: "date-picker-root__main__content-wrapper" }, h("div", { key: '398fdf3c164f3bf5bdb6227747ad6c6097f715b4', class: "date-picker" }, h("month-navigator", { key: '1cb193a4f5cc3c7af7147796bc90d858a363bb91', currentMonth: this.currentMonth, onChange: (date) => this.handleChangeMonth(date), showArrows: !this.dualMonthView }), h("div", { key: 'b0b7edd4acb4fd62d522f62fa34a9cc8f2753378', class: "date-picker__weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: '38395bc9a6c9fc7cd2454a8f9bd4d45f3f832036', class: "date-picker__date-grid" }, this.days.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(), isSelected: (this.range)
                ? (!!this.rangeDates.startDate &&
                    compareDatesWithoutTime(date, this.rangeDates.startDate)) ||
                    (!!this.rangeDates.endDate &&
                        compareDatesWithoutTime(date, this.rangeDates.endDate))
                : this.selectedDate
                    ? compareDatesWithoutTime(date, this.selectedDate)
                    : false, isToday: new Date().toDateString() === date.toDateString(), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), midRange: this.isMidRange(date), onSelect: (date) => this.handleSelectDate(date) }))))), this.dualMonthView && (h("div", { key: '900d8d3c3ba17ca570813efb3f86f0ac7cf632c3', class: "date-picker" }, h("month-navigator", { key: '5b29939a2e66dc7ed187a021f17f8c0ad253802c', currentMonth: this.nextMonth, onChange: (date) => {
                const newMonth = date.getMonth() === this.currentMonth.getMonth()
                    ? new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1)
                    : new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
                this.handleChangeMonth(newMonth);
            }, showArrows: true }), h("div", { key: '0745ba842e0a46b4a86a773cf92a4ee4f135f35e', class: "date-picker__weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: '4329675817f4b4909ea5ad050444585820e161fa', class: "date-picker__date-grid" }, this.nextMonthDays.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.nextMonth.getMonth(), isSelected: this.range
                ? (!!this.rangeDates.startDate &&
                    date.getTime() ===
                        this.rangeDates.startDate.getTime()) ||
                    (!!this.rangeDates.endDate &&
                        date.getTime() === this.rangeDates.endDate.getTime())
                : this.selectedDate
                    ? date.getTime() === this.selectedDate.getTime()
                    : false, isToday: new Date().toDateString() === date.toDateString(), midRange: this.isMidRange(date), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), onSelect: (date) => this.handleSelectDate(date) }))))))))), this.submitButton && (h("div", { key: '1fbe152485e879a790d2b9ed014e99c3bfb3025b', class: "date-picker-root__main__buttons" }, h("dga-button", { key: 'd2d542224fd3676dcfb2c540f1dadc19f233bd9c', label: "Cancel", onClick: this.onCancel, size: "lg", variant: "secondary-outline" }), h("dga-button", { key: '28bed2e3bea757b15aa8148ce3b6317c95741e92', label: "Submit", onClick: this.onSubmit, size: "lg", variant: "primary-neutral" })))));
    }
    static get is() { return "dga-datepicker"; }
    static get properties() {
        return {
            "initialDate": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "new Date()"
            },
            "range": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "range",
                "reflect": false,
                "defaultValue": "false"
            },
            "dualMonthView": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "dual-month-view",
                "reflect": false,
                "defaultValue": "false"
            },
            "inputField": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "input-field",
                "reflect": false,
                "defaultValue": "false"
            },
            "submitButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "submit-button",
                "reflect": false,
                "defaultValue": "false"
            },
            "qickOptions": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "qick-options",
                "reflect": false,
                "defaultValue": "false"
            },
            "value": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "onSubmit": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event?: any) => void",
                    "resolved": "(event?: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => { }"
            },
            "onCancel": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event?: any) => void",
                    "resolved": "(event?: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => { }"
            }
        };
    }
    static get states() {
        return {
            "currentMonth": {},
            "selectedDate": {},
            "rangeDates": {},
            "inputDates": {}
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "selectedDate",
                "methodName": "watchSelectedDate"
            }, {
                "propName": "value",
                "methodName": "watchValue"
            }];
    }
}
//# sourceMappingURL=dga-datepicker.js.map
