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";
/**
 * DateTimePicker 日期时间选择器组件
 * 在同一个选择器里选择日期和时间
 */
export class DateTimePicker {
    el;
    /** 绑定值 */
    modelValue;
    /** 输入框占位文本 */
    placeholder = '请选择日期时间';
    /** 是否禁用 */
    disabled = false;
    /** 输入框尺寸 */
    size = 'default';
    /** 是否可清空 */
    clearable = false;
    /** 日期时间格式 */
    format = 'YYYY-MM-DD HH:mm:ss';
    /** 原生 name 属性 */
    name;
    /** 原生 id 属性 */
    inputId;
    isOpen = false;
    inputValue = '';
    selectedDate;
    currentView = 'date';
    /** 值改变事件 */
    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;
        this.currentView = 'date';
    };
    handleClear = (e) => {
        e.stopPropagation();
        this.modelValue = undefined;
        this.inputValue = '';
        this.selectedDate = undefined;
        this.isOpen = false;
        this.hbChange.emit(undefined);
    };
    handleDateSelect = (date) => {
        this.selectedDate = date;
        this.currentView = 'time';
    };
    handleTimeSelect = (hour, minute, second) => {
        const date = new Date(this.selectedDate || new Date());
        date.setHours(hour);
        date.setMinutes(minute);
        date.setSeconds(second);
        this.selectedDate = date;
        this.modelValue = date;
        this.inputValue = formatDate(date, this.format);
        this.isOpen = false;
        this.hbChange.emit(date);
    };
    changeMonth(delta) {
        this.selectedDate = addMonths(this.selectedDate || new Date(), delta);
    }
    render() {
        const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
        const current = this.selectedDate || new Date();
        const hours = Array.from({ length: 24 }, (_, i) => i);
        const minutes = Array.from({ length: 60 }, (_, i) => i);
        const seconds = Array.from({ length: 60 }, (_, i) => i);
        return (h("div", { key: '9163e484f86c08e64bde83efde16cee218c91d7d', class: {
                'hb-date-time-picker': true,
                'hb-date-time-picker--open': this.isOpen,
                'hb-date-time-picker--disabled': this.disabled,
                [`hb-date-time-picker--${this.size}`]: true,
            } }, h("div", { key: '27f1ce225146eadc2cea57a7190a8ec692f29694', class: "hb-date-time-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: 'c42a6797f717a3fe27544307b2c94958f18df9a7', type: "text", id: this.inputId, name: this.name, class: "hb-date-time-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true }), h("span", { key: '30210b48b776ae5417cdaec2e956d9d071be3e60', class: "hb-date-time-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '5b32d6ccbba09273cfecc84f1b400b5d282b1e87', class: "hb-date-time-picker__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'ec7c2a97de3147de92a7e0229c5830db801e7eb7', class: "hb-date-time-picker__icon" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '6d54ed7b5001d0ab43342062d68152f6cd55d2d2', class: "hb-date-time-picker__dropdown" }, this.currentView === 'date' ? ([
            h("div", { class: "hb-date-time-picker__header" }, h("button", { type: "button", class: "hb-date-time-picker__prev-btn", onClick: () => this.changeMonth(-1) }, "\u2039"), h("span", { class: "hb-date-time-picker__header-label" }, current.getFullYear(), "\u5E74 ", MONTH_NAMES[current.getMonth()]), h("button", { type: "button", class: "hb-date-time-picker__next-btn", onClick: () => this.changeMonth(1) }, "\u203A")),
            h("div", { class: "hb-date-time-picker__body" }, h("div", { class: "hb-date-time-picker__weekdays" }, WEEK_DAY_NAMES.map(day => h("div", { class: "hb-date-time-picker__weekday" }, day))), h("div", { class: "hb-date-time-picker__days" }, days.map((day, index) => (h("div", { key: index, class: {
                    'hb-date-time-picker__day': true,
                    'hb-date-time-picker__day--other-month': !day.isCurrentMonth,
                    'hb-date-time-picker__day--today': day.isToday,
                    'hb-date-time-picker__day--selected': day.isSelected,
                }, onClick: () => day.isCurrentMonth && this.handleDateSelect(day.date) }, day.date.getDate()))))),
        ]) : (h("div", { class: "hb-date-time-picker__time-body" }, h("div", { class: "hb-date-time-picker__time-list" }, h("div", { class: "hb-date-time-picker__time-title" }, "\u65F6"), h("div", { class: "hb-date-time-picker__time-content" }, hours.map((hour) => (h("div", { class: {
                'hb-date-time-picker__time-item': true,
                'hb-date-time-picker__time-item--selected': hour === (this.selectedDate?.getHours() || 0),
            }, onClick: () => this.handleTimeSelect(hour, this.selectedDate?.getMinutes() || 0, this.selectedDate?.getSeconds() || 0) }, String(hour).padStart(2, '0')))))), h("div", { class: "hb-date-time-picker__time-list" }, h("div", { class: "hb-date-time-picker__time-title" }, "\u5206"), h("div", { class: "hb-date-time-picker__time-content" }, minutes.map((minute) => (h("div", { class: {
                'hb-date-time-picker__time-item': true,
                'hb-date-time-picker__time-item--selected': minute === (this.selectedDate?.getMinutes() || 0),
            }, onClick: () => this.handleTimeSelect(this.selectedDate?.getHours() || 0, minute, this.selectedDate?.getSeconds() || 0) }, String(minute).padStart(2, '0')))))), h("div", { class: "hb-date-time-picker__time-list" }, h("div", { class: "hb-date-time-picker__time-title" }, "\u79D2"), h("div", { class: "hb-date-time-picker__time-content" }, seconds.map((second) => (h("div", { class: {
                'hb-date-time-picker__time-item': true,
                'hb-date-time-picker__time-item--selected': second === (this.selectedDate?.getSeconds() || 0),
            }, onClick: () => this.handleTimeSelect(this.selectedDate?.getHours() || 0, this.selectedDate?.getMinutes() || 0, second) }, String(second).padStart(2, '0'))))))))))));
    }
    static get is() { return "hb-date-time-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["date-time-picker.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["date-time-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\u65F6\u95F4'"
            },
            "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\u65F6\u95F4\u683C\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "format",
                "reflect": false,
                "defaultValue": "'YYYY-MM-DD HH:mm:ss'"
            },
            "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": {},
            "currentView": {}
        };
    }
    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=DateTimePicker.js.map
