import { h } from "@stencil/core";
import { createClickOutsideHandler } from "../../utils/click-outside";
/**
 * TimePicker 时间选择器组件
 * 用于选择或输入时间
 */
export class TimePicker {
    el;
    /**
     * 绑定值
     */
    modelValue;
    /**
     * 输入框占位文本
     */
    placeholder = '请选择时间';
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 输入框尺寸
     */
    size = 'default';
    /**
     * 是否可清空
     * @default false
     */
    clearable = false;
    /**
     * 时间格式
     * @default 'HH:mm:ss'
     */
    format = 'HH:mm:ss';
    /**
     * 原生 name 属性
     */
    name;
    /**
     * 原生 id 属性
     */
    inputId;
    isOpen = false;
    inputValue = '';
    selectedHour = 0;
    selectedMinute = 0;
    selectedSecond = 0;
    /**
     * 值改变事件
     */
    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() {
        if (!this.modelValue) {
            this.inputValue = '';
            return;
        }
        const parts = this.modelValue.split(':');
        if (parts.length >= 2) {
            this.selectedHour = parseInt(parts[0]) || 0;
            this.selectedMinute = parseInt(parts[1]) || 0;
            this.selectedSecond = parseInt(parts[2]) || 0;
            this.inputValue = this.modelValue;
        }
    }
    handleInputClick = () => {
        if (this.disabled)
            return;
        this.isOpen = !this.isOpen;
    };
    handleClear = (e) => {
        e.stopPropagation();
        this.modelValue = undefined;
        this.inputValue = '';
        this.isOpen = false;
        this.hbChange.emit(undefined);
    };
    handleTimeSelect = (hour, minute, second) => {
        this.selectedHour = hour;
        this.selectedMinute = minute;
        this.selectedSecond = second;
        const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`;
        this.modelValue = timeStr;
        this.inputValue = timeStr;
        this.isOpen = false;
        this.hbChange.emit(timeStr);
    };
    generateNumbers(max) {
        return Array.from({ length: max + 1 }, (_, i) => i);
    }
    render() {
        const hours = this.generateNumbers(23);
        const minutes = this.generateNumbers(59);
        const seconds = this.generateNumbers(59);
        return (h("div", { key: '9094283db6c38172f2f03afc10a853df1e0c669c', class: {
                'hb-time-picker': true,
                'hb-time-picker--open': this.isOpen,
                'hb-time-picker--disabled': this.disabled,
                [`hb-time-picker--${this.size}`]: true,
            } }, h("div", { key: 'f96d2140416a203cabe716024c5f885bfc695cf7', class: "hb-time-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: '742a2e365167ab75563da2c6c0b6cc6b0d944e60', type: "text", id: this.inputId, name: this.name, class: "hb-time-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true }), h("span", { key: '1be1f914701d9b2475ca33b646fd0edd0b838e28', class: "hb-time-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: 'dab0ca8babf46b0101c98f39a4b0dbfd65ba4af1', class: "hb-time-picker__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'adc2a72220366441cda6b93df5750247766078d6', class: "hb-time-picker__icon" }, "\uD83D\uDD50"))), this.isOpen && (h("div", { key: '8cb56572553259f7eb217c59b08f12517cc80ea0', class: "hb-time-picker__dropdown" }, h("div", { key: '0d3349183f69feb327e87837a6e7d7c779a5933e', class: "hb-time-picker__body" }, h("div", { key: 'c8a856d7fd258b35d6d4fc1cd099f06e676246ec', class: "hb-time-picker__list" }, h("div", { key: 'b0ea8ce96ccf37b7b796ede2ddf3c1174240af86', class: "hb-time-picker__list-title" }, "\u65F6"), h("div", { key: 'b64f8611176a34fc9423b4e97b2f75b2fd35b424', class: "hb-time-picker__list-content" }, hours.map((hour) => (h("div", { class: {
                'hb-time-picker__item': true,
                'hb-time-picker__item--selected': hour === this.selectedHour,
            }, onClick: () => this.handleTimeSelect(hour, this.selectedMinute, this.selectedSecond) }, String(hour).padStart(2, '0')))))), h("div", { key: 'bb942f55ddae345907af5fd02e5cee5212708f5c', class: "hb-time-picker__list" }, h("div", { key: '668ea699803a436745c75eb9731c057bbeed8a1d', class: "hb-time-picker__list-title" }, "\u5206"), h("div", { key: '47a6302477dd7723c046f5f17651aea2ef538cb6', class: "hb-time-picker__list-content" }, minutes.map((minute) => (h("div", { class: {
                'hb-time-picker__item': true,
                'hb-time-picker__item--selected': minute === this.selectedMinute,
            }, onClick: () => this.handleTimeSelect(this.selectedHour, minute, this.selectedSecond) }, String(minute).padStart(2, '0')))))), this.format.includes('ss') && (h("div", { key: '61d76686b06642b0af2df140723eac7f263692ae', class: "hb-time-picker__list" }, h("div", { key: 'c12f055dca542b95e3e9f4a5113c3262c4c0e406', class: "hb-time-picker__list-title" }, "\u79D2"), h("div", { key: '71ede0e6b2412009b840e3c52ec0664035db45bd', class: "hb-time-picker__list-content" }, seconds.map((second) => (h("div", { class: {
                'hb-time-picker__item': true,
                'hb-time-picker__item--selected': second === this.selectedSecond,
            }, onClick: () => this.handleTimeSelect(this.selectedHour, this.selectedMinute, second) }, String(second).padStart(2, '0'))))))))))));
    }
    static get is() { return "hb-time-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["time-picker.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["time-picker.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "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\u65F6\u95F4'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "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": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "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": [{
                            "name": "default",
                            "text": "'HH:mm:ss'"
                        }],
                    "text": "\u65F6\u95F4\u683C\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "format",
                "reflect": false,
                "defaultValue": "'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": {},
            "selectedHour": {},
            "selectedMinute": {},
            "selectedSecond": {}
        };
    }
    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",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=TimePicker.js.map
