import { h } from "@stencil/core";
export class MessageInput {
    el;
    /**
     * 占位符文本
     */
    placeholder = '输入消息...';
    /**
     * 是否禁用输入
     */
    disabled = false;
    /**
     * 最大输入长度
     */
    maxLength = 1000;
    /**
     * 是否显示发送按钮
     */
    showSendButton = true;
    /**
     * 是否支持多行输入
     */
    multiline = true;
    /**
     * 是否自动聚焦
     */
    autoFocus = false;
    /**
     * 发送按钮文本
     */
    sendButtonText = '发送';
    inputValue = '';
    isComposing = false;
    textareaRef;
    inputRef;
    componentDidLoad() {
        if (this.autoFocus) {
            this.focus();
        }
    }
    focus() {
        if (this.multiline && this.textareaRef) {
            this.textareaRef.focus();
        }
        else if (!this.multiline && this.inputRef) {
            this.inputRef.focus();
        }
    }
    handleInput = (event) => {
        const target = event.target;
        this.inputValue = target.value;
        this.inputChange.emit(this.inputValue);
        this.adjustTextareaHeight();
    };
    handleKeyDown = (event) => {
        if (event.key === 'Enter') {
            if (this.multiline) {
                // 多行模式下，Ctrl+Enter 或 Cmd+Enter 发送
                if (event.ctrlKey || event.metaKey) {
                    event.preventDefault();
                    this.sendMessage();
                }
            }
            else {
                // 单行模式下，Enter 直接发送
                event.preventDefault();
                this.sendMessage();
            }
        }
    };
    handleCompositionStart = () => {
        this.isComposing = true;
    };
    handleCompositionEnd = () => {
        this.isComposing = false;
    };
    sendMessage = () => {
        if (this.disabled || !this.inputValue.trim() || this.isComposing) {
            return;
        }
        const message = this.inputValue.trim();
        this.inputValue = '';
        // 重置输入框高度
        if (this.textareaRef) {
            this.textareaRef.style.height = 'auto';
        }
        // 触发发送事件
        this.messageSend.emit({
            content: message,
            timestamp: Date.now()
        });
    };
    adjustTextareaHeight = () => {
        if (this.textareaRef) {
            this.textareaRef.style.height = 'auto';
            this.textareaRef.style.height = Math.min(this.textareaRef.scrollHeight, 120) + 'px';
        }
    };
    /**
     * 消息发送事件
     */
    messageSend;
    /**
     * 输入变化事件
     */
    inputChange;
    render() {
        const inputClass = `message-input ${this.disabled ? 'disabled' : ''}`;
        const sendButtonClass = `send-button ${!this.inputValue.trim() || this.disabled ? 'disabled' : ''}`;
        return (h("div", { key: '3b56075a35e8d42f573cc7b73e52787aa294044d', class: inputClass }, h("div", { key: 'a503a84e704fdec65c5ad9238a1f13802c8e6e04', class: "input-container" }, this.multiline ? (h("textarea", { ref: (el) => this.textareaRef = el, class: "input-field", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxLength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, rows: 1 })) : (h("input", { ref: (el) => this.inputRef = el, type: "text", class: "input-field", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxLength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })), this.showSendButton && (h("button", { key: '6e7b9561a4ef45fea52cbe82a2fb8ddfcd299da1', class: sendButtonClass, disabled: !this.inputValue.trim() || this.disabled, onClick: this.sendMessage, type: "button" }, this.sendButtonText))), this.maxLength > 0 && (h("div", { key: '61fa9f2929ed47d82a6ad3ed8a32b28f9a659b74', class: "char-count" }, this.inputValue.length, "/", this.maxLength))));
    }
    static get is() { return "message-input"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["message-input.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["message-input.css"]
        };
    }
    static get properties() {
        return {
            "placeholder": {
                "type": "string",
                "attribute": "placeholder",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5360\u4F4D\u7B26\u6587\u672C"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'\u8F93\u5165\u6D88\u606F...'"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u7981\u7528\u8F93\u5165"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "maxLength": {
                "type": "number",
                "attribute": "max-length",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5927\u8F93\u5165\u957F\u5EA6"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "1000"
            },
            "showSendButton": {
                "type": "boolean",
                "attribute": "show-send-button",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u53D1\u9001\u6309\u94AE"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "multiline": {
                "type": "boolean",
                "attribute": "multiline",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u652F\u6301\u591A\u884C\u8F93\u5165"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "autoFocus": {
                "type": "boolean",
                "attribute": "auto-focus",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u81EA\u52A8\u805A\u7126"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "sendButtonText": {
                "type": "string",
                "attribute": "send-button-text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u53D1\u9001\u6309\u94AE\u6587\u672C"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'\u53D1\u9001'"
            }
        };
    }
    static get states() {
        return {
            "inputValue": {},
            "isComposing": {}
        };
    }
    static get events() {
        return [{
                "method": "messageSend",
                "name": "messageSend",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6D88\u606F\u53D1\u9001\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "{ content: string; timestamp: number }",
                    "resolved": "{ content: string; timestamp: number; }",
                    "references": {}
                }
            }, {
                "method": "inputChange",
                "name": "inputChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u53D8\u5316\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=message-input.js.map
