import { h, Host } from "@stencil/core";
import { PlatformServiceName, } from "@limetech/lime-web-components";
/**
 * Chat item
 * Renders each chat bubble in the list.
 *
 * @private
 */
export class ChatListItem {
    constructor() {
        /**
         * Indicates whether there is an error,
         * for example when message was not sent or delivered.
         */
        this.hasError = false;
        this.createActionBarItem = (action) => {
            var _a, _b;
            if ('separator' in action) {
                return action;
            }
            let item = {
                value: action,
                text: (_a = action.label) !== null && _a !== void 0 ? _a : '',
                secondaryText: action.description,
                disabled: action.disabled,
            };
            if (!action.label && action.icon) {
                item = Object.assign(Object.assign({}, item), { icon: action.icon, text: (_b = action.description) !== null && _b !== void 0 ? _b : item.text, iconOnly: true });
            }
            else if (action.icon) {
                item = Object.assign(Object.assign({}, item), { icon: action.icon });
            }
            return item;
        };
        this.handleActionBarItemSelect = (event) => {
            var _a;
            event.stopPropagation();
            const command = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.command;
            if (command) {
                this.commandbus.handle(command);
            }
        };
        this.createMenuItem = (action) => {
            var _a, _b;
            if ('separator' in action) {
                return action;
            }
            return {
                value: action,
                text: (_a = action.label) !== null && _a !== void 0 ? _a : '',
                secondaryText: action.description,
                disabled: action.disabled,
                icon: (_b = action.icon) !== null && _b !== void 0 ? _b : '',
            };
        };
        this.handleMenuItemSelect = (event) => {
            var _a;
            event.stopPropagation();
            const command = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.command;
            if (command) {
                this.commandbus.handle(command);
            }
        };
    }
    render() {
        const helperTextId = `helper-text-${this.item.id}`;
        return (h(Host, { key: '971b486298a8f88790178592c174561bdc3b7b13', id: this.item.id, "aria-describedby": this.helperText ? helperTextId : undefined, "aria-live": this.hasError ? 'assertive' : 'off', class: {
                [`${this.item.ui}`]: true,
            } }, h("div", { key: 'b5cde4080a9c6e4d30d89b8d9a323e41d913d00b', class: "bubble-content" }, h("div", { key: '1d674bfb86bd0356bbbb1244848f7f9fe2f04916', class: "icon-picture" }, this.renderIcon(), this.renderAuthorPicture()), this.renderErrorSign(), h("div", { key: 'b4c34568322082230de44312c42b98d86b5a28fc', class: "item" }, this.renderHeader(), this.renderValue(), h("footer", { key: 'b9a5026726ac13dfe01e02263ace3817c3d71ad4' }, this.renderHelperText(helperTextId), this.renderTimestamp()))), this.renderPromotedAction()));
    }
    renderErrorSign() {
        if (!this.hasError) {
            return;
        }
        return h("limel-icon", { class: "error-sign", name: "brake_warning" });
    }
    renderHeader() {
        var _a;
        if (!((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name)) {
            return;
        }
        return (h("header", null, this.renderAuthorName(), h("div", { class: "action-buttons" }, this.renderUnpromotedActionsMenu())));
    }
    renderIcon() {
        var _a, _b, _c, _d;
        if (!this.item.icon) {
            return;
        }
        return (h("limel-icon", { class: "icon", badge: true, name: (_b = (_a = this.item.icon) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'dot_circle', style: {
                color: `${(_c = this.item.icon) === null || _c === void 0 ? void 0 : _c.color}`,
                'background-color': `${(_d = this.item.icon) === null || _d === void 0 ? void 0 : _d.backgroundColor}`,
            } }));
    }
    renderHelperText(helperTextId) {
        if (!this.helperText) {
            return;
        }
        return (h("span", { class: "helper-text", id: helperTextId }, this.helperText));
    }
    renderValue() {
        if (!this.item.value) {
            return;
        }
        return (h("limel-markdown", { class: "body-text reset-img-height", value: this.item.value }));
    }
    renderAuthorName() {
        var _a, _b;
        if (typeof ((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name) === 'string') {
            return h("span", { class: "author" }, this.item.author.name);
        }
        if (typeof ((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.name) === 'object') {
            const { href, title, text } = this.item.author.name;
            return (h("a", { class: "author", href: href, title: title }, text));
        }
    }
    renderAuthorPicture() {
        var _a;
        if (!((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.picture)) {
            return;
        }
        // If the "picture url" is set to "limel-ai-avatar",
        // we render a limel-ai-avatar component instead of an image.
        if (this.item.author.picture === 'limel-ai-avatar') {
            return h("limel-ai-avatar", { class: "author-avatar" });
        }
        return (h("img", { class: "author-avatar", loading: "lazy", src: this.item.author.picture }));
    }
    renderUnpromotedActionsMenu() {
        var _a, _b;
        if (!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length)) {
            return;
        }
        const items = this.item.unpromotedActions.map(this.createMenuItem);
        return (h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.more-actions') })));
    }
    renderPromotedAction() {
        if (!this.item.promotedActions) {
            return;
        }
        const actions = this.item.promotedActions.map(this.createActionBarItem);
        return (h("div", { class: "action-bar" }, h("div", { class: "action-bar-hider" }, h("limel-action-bar", { accessibleLabel: "Action bar", actions: actions, layout: "fullWidth", onItemSelected: this.handleActionBarItemSelect }))));
    }
    renderTimestamp() {
        const timestamp = this.item.timestamp;
        if (!timestamp) {
            return;
        }
        return (h("span", { class: "timestamp" }, this.dateTimeFormatter.format(timestamp, 'timeofday')));
    }
    get dateTimeFormatter() {
        return this.platform.get(PlatformServiceName.DateTimeFormatter);
    }
    get translator() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.Translate);
    }
    get commandbus() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.CommandBus);
    }
    static get is() { return "limebb-chat-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["chat-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["chat-item.css"]
        };
    }
    static get properties() {
        return {
            "platform": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentPlatform",
                    "resolved": "LimeWebComponentPlatform",
                    "references": {
                        "LimeWebComponentPlatform": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentPlatform",
                            "referenceLocation": "LimeWebComponentPlatform"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                },
                "getter": false,
                "setter": false
            },
            "context": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentContext",
                    "resolved": "LimeWebComponentContext",
                    "references": {
                        "LimeWebComponentContext": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentContext",
                            "referenceLocation": "LimeWebComponentContext"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                },
                "getter": false,
                "setter": false
            },
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ChatItem",
                    "resolved": "ChatItem",
                    "references": {
                        "ChatItem": {
                            "location": "import",
                            "path": "./chat-item.types",
                            "id": "src/components/chat-list/chat-item/chat-item.types.ts::ChatItem",
                            "referenceLocation": "ChatItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The item to display in the notification list."
                },
                "getter": false,
                "setter": false
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "See docs of [ChatItem](#/type/ChatItem/) interface."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-text"
            },
            "hasError": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether there is an error,\nfor example when message was not sent or delivered."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "has-error",
                "defaultValue": "false"
            }
        };
    }
}
