import { __decorate } from "tslib";
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
import { keyEnter } from '@ni/fast-web-utilities';
import { attr, nullableNumberConverter, observable, DOM } from '@ni/fast-element';
import { mixinErrorPattern } from '@ni/nimble-components/dist/esm/patterns/error/types';
import { styles } from './styles';
import { template } from './template';
/**
 * A Spright component for composing and sending a chat message
 */
export class ChatInput extends mixinErrorPattern(FoundationElement) {
    constructor() {
        super(...arguments);
        this.value = '';
        this.maxLength = -1;
        this.processing = false;
        /**
         * @internal
         */
        this.disableSendButton = true;
        /**
         * The width of the vertical scrollbar, if displayed.
         * @internal
         */
        this.scrollbarWidth = -1;
        this.updateScrollbarWidthQueued = false;
    }
    /**
     * @internal
     */
    textAreaKeydownHandler(e) {
        if (e.key === keyEnter && !e.shiftKey) {
            if (this.processing) {
                return false;
            }
            this.sendButtonClickHandler();
            return false;
        }
        return true;
    }
    /**
     * @internal
     */
    textAreaInputHandler() {
        this.value = this.textArea.value;
        this.disableSendButton = this.shouldDisableSendButton();
        this.queueUpdateScrollbarWidth();
    }
    // If a property can affect whether a scrollbar is visible, we need to
    // call queueUpdateScrollbarWidth() when it changes. The exceptions are
    // properties that affect size (e.g. height, width, cols, rows), because
    // we already have a ResizeObserver handling those changes. Also,
    // a change to errorVisible cannot cause scrollbar visibility to change,
    // because we always reserve space for the error icon.
    /**
     * @internal
     */
    placeholderChanged() {
        this.queueUpdateScrollbarWidth();
    }
    /**
     * @internal
     */
    valueChanged() {
        if (this.textArea) {
            this.textArea.value = this.value;
            this.disableSendButton = this.shouldDisableSendButton();
            this.queueUpdateScrollbarWidth();
        }
    }
    /**
     * @internal
     */
    connectedCallback() {
        super.connectedCallback();
        this.textArea.value = this.value;
        this.disableSendButton = this.shouldDisableSendButton();
        this.resizeObserver = new ResizeObserver(() => this.onResize());
        this.resizeObserver.observe(this);
    }
    /**
     * @internal
     */
    disconnectedCallback() {
        super.disconnectedCallback();
        this.resizeObserver?.disconnect();
    }
    /**
     * @internal
     */
    sendButtonClickHandler() {
        if (this.shouldDisableSendButton()) {
            return;
        }
        const eventDetail = {
            text: this.textArea.value
        };
        this.resetInput();
        this.$emit('send', eventDetail);
    }
    /**
     * @internal
     */
    stopButtonClickHandler() {
        if (!this.processing) {
            return;
        }
        this.$emit('stop');
        this.textArea?.blur();
    }
    shouldDisableSendButton() {
        return this.textArea.value.length === 0;
    }
    resetInput() {
        this.value = '';
        this.disableSendButton = true;
        if (this.textArea) {
            this.textArea.value = '';
            this.textArea.focus();
        }
    }
    onResize() {
        this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
    }
    queueUpdateScrollbarWidth() {
        if (!this.$fastController.isConnected) {
            return;
        }
        if (!this.updateScrollbarWidthQueued) {
            this.updateScrollbarWidthQueued = true;
            DOM.queueUpdate(() => this.updateScrollbarWidth());
        }
    }
    updateScrollbarWidth() {
        this.updateScrollbarWidthQueued = false;
        this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
    }
}
__decorate([
    attr
], ChatInput.prototype, "placeholder", void 0);
__decorate([
    attr({ attribute: 'send-button-label' })
], ChatInput.prototype, "sendButtonLabel", void 0);
__decorate([
    attr({ attribute: 'stop-button-label' })
], ChatInput.prototype, "stopButtonLabel", void 0);
__decorate([
    attr
], ChatInput.prototype, "value", void 0);
__decorate([
    attr({ attribute: 'tabindex', converter: nullableNumberConverter })
], ChatInput.prototype, "tabIndex", void 0);
__decorate([
    attr({ attribute: 'maxlength', converter: nullableNumberConverter })
], ChatInput.prototype, "maxLength", void 0);
__decorate([
    attr({ attribute: 'processing', mode: 'boolean' })
], ChatInput.prototype, "processing", void 0);
__decorate([
    observable
], ChatInput.prototype, "textArea", void 0);
__decorate([
    observable
], ChatInput.prototype, "disableSendButton", void 0);
__decorate([
    observable
], ChatInput.prototype, "scrollbarWidth", void 0);
const sprightChatInput = ChatInput.compose({
    baseName: 'chat-input',
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true
    }
});
DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());
export const chatInputTag = 'spright-chat-input';
//# sourceMappingURL=index.js.map