import { h } from "@stencil/core";
import { createClickOutsideHandler } from "../../utils/click-outside";
import { getCalendarDays, formatDate, parseDate, addMonths, MONTH_NAMES, WEEK_DAY_NAMES } from "../../utils/date-helpers";
/**
 * DatePicker 日期选择器组件
 * 用于选择或输入日期
 */
export class DatePicker {
    el;
    /** 绑定值 */
    modelValue;
    /** 输入框占位文本 */
    placeholder = '请选择日期';
    /** 是否禁用 */
    disabled = false;
    /** 输入框尺寸 */
    size = 'default';
    /** 是否可清空 */
    clearable = false;
    /** 日期格式 */
    format = 'YYYY-MM-DD';
    /** 显示在输入框中的格式 */
    valueFormat;
    /**
     * 日期选择器类型
     * 当前仅支持 'date'，更多类型将在后续版本实现
     */
    type = 'date';
    /**
     * 禁用日期判定函数。返回 true 的日期在日历中不可选（加 disabled 态、不可点击、aria-disabled）。
     * @param date 当前日期格子的 Date 对象
     */
    disabledDate;
    /** 原生 name 属性 */
    name;
    /** 原生 id 属性 */
    inputId;
    isOpen = false;
    inputValue = '';
    selectedDate;
    /** 值改变事件 */
    hbChange;
    clickOutside = createClickOutsideHandler({
        host: null,
        isOpen: () => this.isOpen,
        onClose: () => { this.isOpen = false; },
    });
    componentDidLoad() {
        this.clickOutside = createClickOutsideHandler({
            host: this.el,
            isOpen: () => this.isOpen,
            onClose: () => { this.isOpen = false; },
        });
        this.clickOutside.connect();
        this.updateInputValue();
    }
    disconnectedCallback() {
        this.clickOutside.disconnect();
    }
    handleValueChange() {
        this.updateInputValue();
    }
    updateInputValue() {
        const date = parseDate(this.modelValue);
        if (!date) {
            this.inputValue = '';
            this.selectedDate = undefined;
            return;
        }
        this.selectedDate = date;
        this.inputValue = formatDate(date, this.format);
    }
    handleInputClick = () => {
        if (this.disabled)
            return;
        this.isOpen = !this.isOpen;
    };
    handleClear = (e) => {
        e.stopPropagation();
        this.modelValue = undefined;
        this.inputValue = '';
        this.selectedDate = undefined;
        this.isOpen = false;
        this.hbChange.emit(undefined);
    };
    handleDateSelect = (date) => {
        // disabledDate 返回 true 的日期不可选
        if (this.disabledDate && this.disabledDate(date))
            return;
        this.selectedDate = date;
        this.modelValue = this.valueFormat ? formatDate(date, this.format) : date;
        this.updateInputValue();
        this.isOpen = false;
        this.hbChange.emit(this.modelValue);
    };
    changeMonth(delta) {
        this.selectedDate = addMonths(this.selectedDate || new Date(), delta);
    }
    /** 判断某日期是否被 disabledDate 禁用 */
    isDateDisabled = (date) => {
        return !!this.disabledDate && this.disabledDate(date);
    };
    render() {
        const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
        const current = this.selectedDate || new Date();
        return (h("div", { key: '79e20fe927318faa30086dbe5cd3e17b24077f8f', class: {
                'hb-date-picker': true,
                'hb-date-picker--open': this.isOpen,
                'hb-date-picker--disabled': this.disabled,
                [`hb-date-picker--${this.size}`]: true,
            } }, h("div", { key: 'eb216f889017004192cdc04496334c21e714e971', class: "hb-date-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: 'ac23cc7e2d3ba77141ec342477bf984ce581b30a', type: "text", id: this.inputId, name: this.name, class: "hb-date-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.placeholder }), h("span", { key: 'd9371788b72feacd581e908d65770af8b9eb535a', class: "hb-date-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '86601557f8419ba22111ca214c3130ee444b383e', class: "hb-date-picker__clear", role: "button", "aria-label": "\u6E05\u7A7A", onClick: this.handleClear }, "\u00D7")), h("span", { key: '55662b6a4b49cf42c54e2906fb062c8c45a9259e', class: "hb-date-picker__icon", "aria-hidden": "true" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '3b1d2bbb8fd12b5b8c2748028f7b13daa08df5a0', class: "hb-date-picker__dropdown", role: "dialog", "aria-label": "\u9009\u62E9\u65E5\u671F" }, h("div", { key: '310b54cb7c477fc52657b220201e82f69059b3a0', class: "hb-date-picker__header" }, h("button", { key: '63cf02ce80ea6522592863a31696b91b79ebd0ef', type: "button", class: "hb-date-picker__prev-btn", "aria-label": "\u4E0A\u4E00\u6708", onClick: () => this.changeMonth(-1) }, "\u2039"), h("span", { key: 'f74837430f189198929125413a7b61568e37c1a7', class: "hb-date-picker__header-label", "aria-live": "polite" }, current.getFullYear(), "\u5E74 ", MONTH_NAMES[current.getMonth()]), h("button", { key: 'db36b5b8823fa3dc5f8355d77225b19ea262d2fd', type: "button", class: "hb-date-picker__next-btn", "aria-label": "\u4E0B\u4E00\u6708", onClick: () => this.changeMonth(1) }, "\u203A")), h("div", { key: '2adbe9940556d5f01049bcdb4777c67b2519c5ef', class: "hb-date-picker__body", role: "grid" }, h("div", { key: 'd4b2deab072b795b852abdb4e54f9c3493feaecd', class: "hb-date-picker__weekdays", role: "row" }, WEEK_DAY_NAMES.map(day => (h("div", { class: "hb-date-picker__weekday", role: "columnheader", "aria-disabled": "true" }, day)))), h("div", { key: '208e6260719c97616be80386b3fc9da3521eed83', class: "hb-date-picker__days", role: "row" }, days.map((day, index) => {
            const dayDisabled = day.isCurrentMonth && this.isDateDisabled(day.date);
            return (h("div", { key: index, class: {
                    'hb-date-picker__day': true,
                    'hb-date-picker__day--other-month': !day.isCurrentMonth,
                    'hb-date-picker__day--today': day.isToday,
                    'hb-date-picker__day--selected': day.isSelected,
                    'hb-date-picker__day--disabled': dayDisabled,
                }, role: "gridcell", "aria-selected": day.isSelected ? 'true' : 'false', "aria-disabled": !day.isCurrentMonth || dayDisabled ? 'true' : undefined, "aria-label": formatDate(day.date, this.format), onClick: () => day.isCurrentMonth && !dayDisabled && this.handleDateSelect(day.date) }, day.date.getDate()));
        })))))));
    }
    static get is() { return "hb-date-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["date-picker.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["date-picker.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string | Date",
                    "resolved": "Date | string",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5360\u4F4D\u6587\u672C"
                },
                "getter": false,
                "setter": false,
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "'\u8BF7\u9009\u62E9\u65E5\u671F'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u7981\u7528"
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'default' | 'small'",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5C3A\u5BF8"
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "clearable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u53EF\u6E05\u7A7A"
                },
                "getter": false,
                "setter": false,
                "attribute": "clearable",
                "reflect": false,
                "defaultValue": "false"
            },
            "format": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u65E5\u671F\u683C\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "format",
                "reflect": false,
                "defaultValue": "'YYYY-MM-DD'"
            },
            "valueFormat": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u663E\u793A\u5728\u8F93\u5165\u6846\u4E2D\u7684\u683C\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "value-format",
                "reflect": false
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"date\"",
                    "resolved": "\"date\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u65E5\u671F\u9009\u62E9\u5668\u7C7B\u578B\n\u5F53\u524D\u4EC5\u652F\u6301 'date'\uFF0C\u66F4\u591A\u7C7B\u578B\u5C06\u5728\u540E\u7EED\u7248\u672C\u5B9E\u73B0"
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'date' as const"
            },
            "disabledDate": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(date: Date) => boolean",
                    "resolved": "(date: Date) => boolean",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "param",
                            "text": "date \u5F53\u524D\u65E5\u671F\u683C\u5B50\u7684 Date \u5BF9\u8C61"
                        }],
                    "text": "\u7981\u7528\u65E5\u671F\u5224\u5B9A\u51FD\u6570\u3002\u8FD4\u56DE true \u7684\u65E5\u671F\u5728\u65E5\u5386\u4E2D\u4E0D\u53EF\u9009\uFF08\u52A0 disabled \u6001\u3001\u4E0D\u53EF\u70B9\u51FB\u3001aria-disabled\uFF09\u3002"
                },
                "getter": false,
                "setter": false
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u539F\u751F name \u5C5E\u6027"
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false
            },
            "inputId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u539F\u751F id \u5C5E\u6027"
                },
                "getter": false,
                "setter": false,
                "attribute": "input-id",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "inputValue": {},
            "selectedDate": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string | Date",
                    "resolved": "Date | string",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=DatePicker.js.map
