import { r as registerInstance, c as createEvent, h } from './index-BIwHMk6j.js';
import { b as n } from './index.esm-CMeGYws2.js';

/**
 * Processes a list of notifications by adding date headers and a "new items" indicator.
 *
 * @param items - The list of notification items to process. These items must be pre-sorted by their `timestamp` in descending order.
 * @param dateTimeFormatter - A service used to format dates for the date headers.
 * @param lastVisitedTimestamp - The timestamp of the user's last visit. This is used to determine where the "new items" indicator should be placed.
 *
 * @returns An array of processed items, including notifications, date headers, and a "new items" indicator if applicable.
 *
 * @example
 * const processedItems = processNotificationItems(
 *     notifications,
 *     dateTimeFormatter,
 *     new Date('2024-09-01T10:00:00Z')
 * );
 *
 * // Output: [
 * //   { type: 'dateHeader', date: '2024-09-01' },
 * //   { type: 'notification', item: notification1 },
 * //   { type: 'notification', item: notification2 },
 * //   { type: 'newItemIndicator' },
 * //   { type: 'dateHeader', date: '2024-08-31' },
 * //   { type: 'notification', item: notification3 },
 * // ]
 */
function processNotificationItems(items, dateTimeFormatter, lastVisitedTimestamp) {
    const initialContext = {
        items: items,
        processedItems: [],
        lastVisitedTimestamp: lastVisitedTimestamp,
        dateTimeFormatter: dateTimeFormatter,
        newItemIndicatorInserted: false,
        lastProcessedDate: null,
        hasUnseenNotifications: items.some((item) => lastVisitedTimestamp &&
            new Date(item.timestamp) > lastVisitedTimestamp),
    };
    // Add processors here, in the order they should be executed
    const processors = [
        insertNotifications,
        insertNewItemIndicator,
        insertDateGroups,
    ];
    const finalContext = createPipeline(initialContext, processors);
    return finalContext.processedItems;
}
function createPipeline(initialContext, processors) {
    // eslint-disable-next-line unicorn/no-array-reduce
    return processors.reduce((context, processor) => processor(context), initialContext);
}
/**
 *
 * @param context
 */
function insertNotifications(context) {
    for (const item of context.items) {
        context.processedItems.push({ type: 'notification', item: item });
    }
    return context;
}
/**
 *
 * @param context
 */
function insertNewItemIndicator(context) {
    const processedWithIndicator = [];
    let newItemIndicatorInserted = context.newItemIndicatorInserted;
    for (const item of context.processedItems) {
        if (item.type === 'notification' &&
            context.lastVisitedTimestamp &&
            !newItemIndicatorInserted &&
            new Date(item.item.timestamp) <= context.lastVisitedTimestamp &&
            context.hasUnseenNotifications) {
            // Insert the new item indicator before the first old notification
            processedWithIndicator.push({ type: 'newItemIndicator' });
            newItemIndicatorInserted = true;
        }
        // Push the current item to the new array
        processedWithIndicator.push(item);
    }
    context.processedItems = processedWithIndicator;
    context.newItemIndicatorInserted = newItemIndicatorInserted;
    return context;
}
/**
 *
 * @param context
 */
// eslint-disable-next-line sonarjs/cognitive-complexity
function insertDateGroups(context) {
    const newProcessedItems = [];
    let currentGroup = null;
    let lastProcessedDate = null;
    // Iterate through the notifications in processedItems
    for (const item of context.processedItems) {
        if (item.type === 'notification') {
            const currentTimestamp = new Date(item.item.timestamp);
            const currentDate = context.dateTimeFormatter.format(currentTimestamp, 'date');
            // If the date changes, push the previous group and create a new group
            if (currentDate !== lastProcessedDate) {
                if (currentGroup) {
                    newProcessedItems.push(currentGroup);
                }
                currentGroup = {
                    type: 'group',
                    groupType: 'dateGroup',
                    heading: currentDate,
                    items: [],
                };
                lastProcessedDate = currentDate;
            }
            // Add the notification to the current group
            if (currentGroup) {
                currentGroup.items.push(item);
            }
        }
        else if (item.type === 'newItemIndicator') {
            // Insert the newItemIndicator within the current group if it exists
            if (currentGroup) {
                currentGroup.items.push(item);
            }
            else {
                newProcessedItems.push(item); // Edge case: no group exists, just add the indicator
            }
        }
    }
    // Push the last group, if it exists
    if (currentGroup) {
        newProcessedItems.push(currentGroup);
    }
    // Return updated context with grouped items
    return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
}

const notificationListCss = () => `@charset "UTF-8";:host(limebb-notification-list){--limebb-notification-list-background-color:var(       --notification-list-background-color,       rgb(var(--contrast-300))   );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:0.5rem}limebb-notification-item:focus{outline:none}limebb-notification-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limebb-notification-item:not(.is-read){--limebb-notification-item-unread-badge-color:rgb(       var(--color-red-default)   );--limebb-notification-item-unread-badge-scale:1;background-color:rgb(var(--contrast-100)) !important}limebb-notification-item.is-clickable{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:focus,limebb-notification-item.is-clickable:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limebb-notification-item.is-clickable:hover{box-shadow:var(--button-shadow-hovered)}limebb-notification-item.is-clickable:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-notification-item.is-clickable:hover{border-color:transparent}limebb-notification-item.is-read{border-color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-500))}limebb-notification-item.is-selected{box-shadow:var(--shadow-focused-state)}limebb-notification-item.is-selected:hover{box-shadow:var(--shadow-focused-state), var(--button-shadow-hovered)}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:"";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:var(--limebb-notification-list-background-color)}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:var(--limebb-notification-list-background-color)}`;

const NotificationList = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.itemClick = createEvent(this, "itemClick");
        /**
         * List of items to display in the feed.
         * These items must be sorted by their `timestamp` in descending order.
         */
        this.items = [];
        this.processedItems = [];
        this.handleItemClick = (event) => {
            this.itemClick.emit(event.detail);
        };
    }
    handleItemsChange() {
        let lastVisited = null;
        if (this.lastVisitedTimestamp) {
            lastVisited = parseToUTCDate(this.lastVisitedTimestamp);
        }
        this.processedItems = processNotificationItems(this.items, this.dateTimeFormatter, lastVisited);
    }
    componentWillLoad() {
        this.handleItemsChange();
    }
    render() {
        return [this.renderSpinner(), this.renderNotificationItems()];
    }
    renderSpinner() {
        if (this.loading) {
            return h("limel-spinner", { size: "small" });
        }
    }
    renderNotificationItems() {
        return this.processedItems.map((item) => {
            switch (item.type) {
                case 'group': {
                    return this.renderGroup(item);
                }
                case 'newItemIndicator': {
                    return this.renderIndicator();
                }
                default: {
                    return null;
                }
            }
        });
    }
    renderGroup(group) {
        return (h("section", { class: "date-group" }, h("a", { class: "date-heading" }, group.heading), group.items.map((item) => {
            if (item.type === 'notification') {
                return this.renderNotificationItem(item.item);
            }
            else if (item.type === 'newItemIndicator') {
                return this.renderIndicator();
            }
        })));
    }
    renderNotificationItem(item) {
        return (h("limebb-notification-item", { platform: this.platform, context: this.context, item: item, key: item.id, onInteract: this.handleItemClick }));
    }
    renderIndicator() {
        return (h("div", { class: "new-items-indicator" }, h("hr", null), h("h3", null, this.translator.get('webclient.new'))));
    }
    get dateTimeFormatter() {
        return this.platform.get(n.DateTimeFormatter);
    }
    get translator() {
        return this.platform.get(n.Translate);
    }
    static get watchers() { return {
        "items": [{
                "handleItemsChange": 0
            }]
    }; }
};
function parseToUTCDate(date) {
    if (typeof date === 'string') {
        return new Date(Date.parse(date));
    }
    return new Date(date); // This will automatically be UTC
}
NotificationList.style = notificationListCss();

export { NotificationList as limebb_notification_list };
