import { h } from "@stencil/core";
import { getCalendarDays, getCalendarYears, getYearRangeStart, parseDate, addMonths, addYears, MONTH_NAMES, WEEK_DAY_NAMES, } from "../../utils/date-helpers";
/**
 * DatePickerPane 日期选择器面板组件
 * 日期选择器面板，用于嵌入到其他组件中
 * 支持 days / months / years 三种视图切换
 */
export class DatePickerPane {
    /** 绑定值 */
    modelValue;
    /** 日期格式 */
    format = 'YYYY-MM-DD';
    /** 当前视图类型，默认 days */
    view = 'days';
    selectedDate;
    /** 值改变事件 */
    hbChange;
    /** 视图切换事件 */
    hbViewChange;
    componentDidLoad() {
        this.updateSelectedDate();
    }
    handleValueChange() {
        this.updateSelectedDate();
    }
    updateSelectedDate() {
        this.selectedDate = parseDate(this.modelValue);
    }
    handleDateSelect = (date) => {
        this.selectedDate = date;
        this.modelValue = date;
        this.hbChange.emit(date);
    };
    /** 头部导航箭头：days 视图 ±1 月，months 视图 ±1 年，years 视图 ±12 年 */
    handlePrev = () => {
        const base = this.selectedDate || new Date();
        if (this.view === 'days') {
            this.selectedDate = addMonths(base, -1);
        }
        else if (this.view === 'months') {
            this.selectedDate = addYears(base, -1);
        }
        else {
            this.selectedDate = addYears(base, -12);
        }
    };
    handleNext = () => {
        const base = this.selectedDate || new Date();
        if (this.view === 'days') {
            this.selectedDate = addMonths(base, 1);
        }
        else if (this.view === 'months') {
            this.selectedDate = addYears(base, 1);
        }
        else {
            this.selectedDate = addYears(base, 12);
        }
    };
    /** 点击 header 标题：days→months→years */
    handleHeaderTitleClick = () => {
        if (this.view === 'days') {
            this.view = 'months';
        }
        else if (this.view === 'months') {
            this.view = 'years';
        }
        this.hbViewChange.emit(this.view);
    };
    /** months 视图：选某月 → 切回 days 并跳到该月 */
    handleMonthSelect = (monthIndex) => {
        const base = this.selectedDate || new Date();
        const next = new Date(base);
        next.setMonth(monthIndex);
        this.selectedDate = next;
        this.view = 'days';
        this.hbViewChange.emit(this.view);
    };
    /** years 视图：选某年 → 切到 months 并跳到该年 */
    handleYearSelect = (year) => {
        const base = this.selectedDate || new Date();
        const next = new Date(base);
        next.setFullYear(year);
        this.selectedDate = next;
        this.view = 'months';
        this.hbViewChange.emit(this.view);
    };
    /** 头部标题文本，根据视图类型生成 */
    getHeaderTitle() {
        const current = this.selectedDate || new Date();
        if (this.view === 'days') {
            return `${current.getFullYear()}年 ${MONTH_NAMES[current.getMonth()]}`;
        }
        if (this.view === 'months') {
            return `${current.getFullYear()}年`;
        }
        // years 视图显示年份档区间，如 2020 - 2031
        const start = getYearRangeStart(current);
        return `${start} - ${start + 11}`;
    }
    render() {
        const current = this.selectedDate || new Date();
        return (h("div", { key: '2259a27d8de2d7944a83a85c2fb2281d22d7f62e', class: "hb-date-picker-pane" }, h("div", { key: '8c27820ac2eeb5a39be44f828879c98a33f89e91', class: "hb-date-picker-pane__header" }, h("button", { key: 'ea7060e14f917bc003303d2dd2d680c3de24d62a', type: "button", class: "hb-date-picker-pane__prev-btn", "aria-label": "\u4E0A\u4E00\u4E2A", onClick: this.handlePrev }, "\u2039"), h("button", { key: '020b053fcfed2384ab62b3c8b408c47864f54a57', type: "button", class: "hb-date-picker-pane__header-label", "aria-live": "polite", onClick: this.handleHeaderTitleClick }, this.getHeaderTitle()), h("button", { key: '055a6e6d191c2c2e29f3d459c27a8007086de7ee', type: "button", class: "hb-date-picker-pane__next-btn", "aria-label": "\u4E0B\u4E00\u4E2A", onClick: this.handleNext }, "\u203A")), this.view === 'days' && this.renderDaysView(), this.view === 'months' && this.renderMonthsView(current), this.view === 'years' && this.renderYearsView(current)));
    }
    renderDaysView() {
        const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__weekdays" }, WEEK_DAY_NAMES.map(day => (h("div", { class: "hb-date-picker-pane__weekday" }, day)))), h("div", { class: "hb-date-picker-pane__days" }, days.map((day, index) => (h("div", { key: index, class: {
                'hb-date-picker-pane__day': true,
                'hb-date-picker-pane__day--other-month': !day.isCurrentMonth,
                'hb-date-picker-pane__day--today': day.isToday,
                'hb-date-picker-pane__day--selected': day.isSelected,
            }, onClick: () => day.isCurrentMonth && this.handleDateSelect(day.date) }, day.date.getDate()))))));
    }
    renderMonthsView(current) {
        // modelValue（选中值）所在的年/月
        const modelDate = parseDate(this.modelValue);
        const selectedMonth = modelDate ? modelDate.getMonth() : -1;
        const selectedYear = modelDate ? modelDate.getFullYear() : -1;
        // current 是当前面板的浏览焦点日期（selectedDate 或今天）
        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__months" }, MONTH_NAMES.map((name, monthIndex) => (h("div", { key: monthIndex, class: {
                'hb-date-picker-pane__month': true,
                'hb-date-picker-pane__month--current': monthIndex === current.getMonth(),
                'hb-date-picker-pane__month--selected': monthIndex === selectedMonth && current.getFullYear() === selectedYear,
            }, onClick: () => this.handleMonthSelect(monthIndex) }, name))))));
    }
    renderYearsView(current) {
        const modelDate = parseDate(this.modelValue);
        const years = getCalendarYears(this.selectedDate || new Date(), modelDate);
        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__years" }, years.map(item => (h("div", { key: item.year, class: {
                'hb-date-picker-pane__year': true,
                'hb-date-picker-pane__year--current': item.year === current.getFullYear(),
                'hb-date-picker-pane__year--selected': item.isSelected,
            }, onClick: () => this.handleYearSelect(item.year) }, item.year))))));
    }
    static get is() { return "hb-date-picker-pane"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["date-picker-pane.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["date-picker-pane.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
            },
            "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'"
            },
            "view": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "DatePickerPaneView",
                    "resolved": "\"days\" | \"months\" | \"years\"",
                    "references": {
                        "DatePickerPaneView": {
                            "location": "local",
                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/DatePickerPane/DatePickerPane.tsx",
                            "id": "src/components/DatePickerPane/DatePickerPane.tsx::DatePickerPaneView"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u89C6\u56FE\u7C7B\u578B\uFF0C\u9ED8\u8BA4 days"
                },
                "getter": false,
                "setter": false,
                "attribute": "view",
                "reflect": false,
                "defaultValue": "'days'"
            }
        };
    }
    static get states() {
        return {
            "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"
                        }
                    }
                }
            }, {
                "method": "hbViewChange",
                "name": "hbViewChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u89C6\u56FE\u5207\u6362\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "DatePickerPaneView",
                    "resolved": "\"days\" | \"months\" | \"years\"",
                    "references": {
                        "DatePickerPaneView": {
                            "location": "local",
                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/DatePickerPane/DatePickerPane.tsx",
                            "id": "src/components/DatePickerPane/DatePickerPane.tsx::DatePickerPaneView"
                        }
                    }
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=DatePickerPane.js.map
