'use strict';

var index = require('./index-C_OnxXhP.js');
var index_esm = require('./index.esm-C1i_NocP.js');

const notificationItemCss = () => `@charset "UTF-8";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;margin-left:0.5rem;border-radius:0.75rem;border:1px solid rgb(var(--contrast-500))}:host(limebb-notification-item):before{content:"";display:block;position:absolute;left:-1rem;top:0.85rem;border-radius:50%;height:0.5rem;width:0.5rem;transition:background-color 0.2s ease, scale 0.2s cubic-bezier(0.82, 0.3, 0.14, 1.36);scale:var(--limebb-notification-item-unread-badge-scale, 0.6);background-color:var(--limebb-notification-item-unread-badge-color, transparent)}:host(limebb-notification-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-notification-item:hover) .body-text{opacity:1}.header{display:flex;align-items:center;gap:0.25rem;min-height:2rem;padding:0 0 0 0.25rem;margin-bottom:0.25rem}.header:not(:has(.icon)){padding-left:0.75rem}.header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.caption,.timestamp{font-size:0.75rem}.caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;flex-grow:1;font-weight:600;color:rgb(var(--contrast-900))}.timestamp{flex-shrink:0;margin-left:auto;transition:color 0.4s ease, opacity 0.2s ease;color:rgb(var(--contrast-900))}.headline{display:flex;gap:0.25rem;align-items:center}.content{display:flex;min-width:0;gap:0.5rem;padding:0 0.75rem 0.5rem 0.75rem}.heading{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.5rem;font-size:0.875rem;--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.body{display:flex;flex-direction:column;gap:0.5rem}.body-text{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:4.25rem;transition:opacity 0.2s ease;opacity:0.7}.icon{--icon-background-color:var(--limebb-feed-background-color);flex-shrink:0;width:1.5rem;padding:0.125rem}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;margin-top:auto;margin-right:-0.25rem;margin-left:auto;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{font-weight:bold;text-decoration:none;white-space:nowrap}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{--button-shadow-normal:none;margin-left:-1rem;margin-bottom:-0.5rem}`;

const NotificationListItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.interact = index.createEvent(this, "interact");
        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 (index.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 index.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 (index.h(index.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 (index.h("div", { class: "header" }, this.renderIcon(), this.renderCaption(), this.renderTimestamp(), this.renderUnpromotedActionsMenu()));
    }
    renderIcon() {
        var _a, _b, _c, _d;
        if (!this.item.icon) {
            return;
        }
        return (index.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 (index.h("div", { class: "content" }, index.h("div", { class: "body" }, this.renderHeadline(), this.renderValue()), this.renderAuthorPicture()));
    }
    renderHeadline() {
        if (!this.item.heading) {
            return;
        }
        return index.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 (index.h("img", { class: "author-avatar", loading: "lazy", src: this.item.author.picture }));
    }
    renderCaption() {
        if (!this.item.caption) {
            return;
        }
        return index.h("h2", { class: "caption" }, this.item.caption);
    }
    renderValue() {
        if (!this.item.value) {
            return;
        }
        return index.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 (index.h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, index.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 (index.h("span", { class: "timestamp" }, this.dateTimeFormatter.format(timestamp, 'timeofday')));
    }
    get dateTimeFormatter() {
        return this.platform.get(index_esm.n.DateTimeFormatter);
    }
    get translator() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.n.Translate);
    }
    get commandbus() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.n.CommandBus);
    }
};
NotificationListItem.style = notificationItemCss();

exports.limebb_notification_item = NotificationListItem;
