import { h, Host } from "@stencil/core";
import { PlatformServiceName, } from "@limetech/lime-web-components";
/**
 * Notification item
 * Renders each notification as a card in the notification list.
 *
 * @private
 */
export class NotificationListItem {
    constructor() {
        this.handleClick = () => {
            if (this.isItemClickable()) {
                this.handleNotificationListItemClick();
            }
        };
        this.handleKeyDown = (event) => {
            if (this.isItemClickable() && event.key === 'Enter') {
                this.handleNotificationListItemClick();
            }
        };
        this.renderHeading = () => {
            if (!this.item.heading) {
                return;
            }
            if (!this.item.author) {
                return (h("limel-markdown", { value: this.translator.get(this.item.heading) }));
            }
            const author = this.getAuthorLink();
            const text = this.translator.get(this.item.heading, { author: author });
            return h("limel-markdown", { class: "heading", value: text });
        };
        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);
            }
        };
        this.handleNotificationListItemClick = () => {
            this.interact.emit(this.item);
        };
    }
    render() {
        var _a, _b;
        return (h(Host, { key: '951b650d804bfe49133743bc461e344d9dd0324b', id: this.item.id, class: {
                'is-clickable': this.isItemClickable(),
                'is-read': !!((_a = this.item) === null || _a === void 0 ? void 0 : _a.read),
                'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),
            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabindex: 0 }, this.renderSource(), this.renderContent()));
    }
    isItemClickable() {
        var _a;
        return !!((_a = this.item) === null || _a === void 0 ? void 0 : _a.clickable);
    }
    renderSource() {
        return (h("div", { class: "header" }, this.renderIcon(), this.renderCaption(), this.renderTimestamp(), 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}`,
            } }));
    }
    renderContent() {
        return (h("div", { class: "content" }, h("div", { class: "body" }, this.renderHeadline(), this.renderValue()), this.renderAuthorPicture()));
    }
    renderHeadline() {
        if (!this.item.heading) {
            return;
        }
        return h("div", { class: "headline" }, this.renderHeading());
    }
    getAuthorLink() {
        if (!this.item.author) {
            return;
        }
        if (typeof this.item.author.name === 'string') {
            return this.item.author.name;
        }
        const { href, text } = this.item.author.name;
        return `[${text}](${href})`;
    }
    renderAuthorPicture() {
        var _a;
        if (!((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.picture)) {
            return;
        }
        return (h("img", { class: "author-avatar", loading: "lazy", src: this.item.author.picture }));
    }
    renderCaption() {
        if (!this.item.caption) {
            return;
        }
        return h("h2", { class: "caption" }, this.item.caption);
    }
    renderValue() {
        if (!this.item.value) {
            return;
        }
        return h("limel-markdown", { class: "body-text", value: this.item.value });
    }
    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') })));
    }
    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-notification-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["notification-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["notification-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": "NotificationItem",
                    "resolved": "NotificationItem<unknown>",
                    "references": {
                        "NotificationItem": {
                            "location": "import",
                            "path": "./notification-item.types",
                            "id": "src/components/notification-list/notification-item/notification-item.types.ts::NotificationItem",
                            "referenceLocation": "NotificationItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The item to display in the notification list."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get events() {
        return [{
                "method": "interact",
                "name": "interact",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when clicking on the Notification item"
                },
                "complexType": {
                    "original": "NotificationItem",
                    "resolved": "NotificationItem<unknown>",
                    "references": {
                        "NotificationItem": {
                            "location": "import",
                            "path": "./notification-item.types",
                            "id": "src/components/notification-list/notification-item/notification-item.types.ts::NotificationItem",
                            "referenceLocation": "NotificationItem"
                        }
                    }
                }
            }];
    }
}
