import { Host, h } from "@stencil/core";
import { typingStore } from "../../store/typing";
import { useTranslation } from "../../utils/utils";
export class TypingIndicator {
    getTypingText(admins) {
        const t = useTranslation();
        if (admins.length === 1) {
            return t('chat_tab.typing_one').replace('{}', admins[0].name);
        }
        else if (admins.length === 2) {
            return t('chat_tab.typing_two')
                .replace('{}', admins[0].name)
                .replace('{}', admins[1].name);
        }
        else {
            return t('chat_tab.typing_many');
        }
    }
    render() {
        const typingAdmins = typingStore.get('typingAdmins');
        const isVisible = typingAdmins.length > 0;
        return (h(Host, { key: '217c69d13da6e95425b5008b1d9c5fd7d34112f2' }, h("div", { key: '6d16943dd6a8122c40f1a5c81e3e66e98e18a019', class: `typing-indicator-wrapper ${isVisible ? 'typing-indicator-visible' : 'typing-indicator-hidden'}` }, isVisible && (h("div", { key: 'a372989c948776ccbc5bb5350bfec040a6c8940c', class: "typing-indicator-content" }, h("div", { key: 'a6744cd0bd7ca70e5d9bb9860c1ae465949e1c60', class: "typing-indicator-dots" }, h("span", { key: '2ed1d716d5d7782271d29855bb30121d01fc7822', class: "typing-dot typing-dot-1" }), h("span", { key: '982ce4a0ad81cf7eb302604e4724be007c972a6f', class: "typing-dot typing-dot-2" }), h("span", { key: '80e491ab102718e7b607e2200c9ddbd3501f7742', class: "typing-dot typing-dot-3" })), h("span", { key: '639b6ad0aa58c587648f24e2d6b032fc7d853e94', class: "typing-indicator-text" }, this.getTypingText(typingAdmins)))))));
    }
    static get is() { return "typing-indicator"; }
    static get originalStyleUrls() {
        return {
            "$": ["typing-indicator.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["typing-indicator.css"]
        };
    }
}
