import { h } from "@stencil/core";
import { PlatformServiceName, } from "@limetech/lime-web-components";
import { processNotificationItems, } from "./process-notification-items";
/**
 * Notification list
 * This component displays a feed of notifications and groups them by date.
 *
 * @exampleComponent limebb-example-notification-list-basic
 * @exampleComponent limebb-example-notification-list-author
 * @exampleComponent limebb-example-notification-list-new-items
 * @exampleComponent limebb-example-notification-list-item-max-height
 * @alpha
 * @private
 */
export class NotificationList {
    constructor() {
        /**
         * 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(PlatformServiceName.DateTimeFormatter);
    }
    get translator() {
        return this.platform.get(PlatformServiceName.Translate);
    }
    static get is() { return "limebb-notification-list"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["notification-list.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["notification-list.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
            },
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "NotificationItem[]",
                    "resolved": "NotificationItem<unknown>[]",
                    "references": {
                        "NotificationItem": {
                            "location": "import",
                            "path": "./notification-item/notification-item.types",
                            "id": "src/components/notification-list/notification-item/notification-item.types.ts::NotificationItem",
                            "referenceLocation": "NotificationItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "List of items to display in the feed.\nThese items must be sorted by their `timestamp` in descending order."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "True if items have not finished loading."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading"
            },
            "lastVisitedTimestamp": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | Date | null",
                    "resolved": "Date | null | string | undefined",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The date and time of the last time the user visited the Notification List.\nWhen provided, the feed will display a divider line between the\nlast visited items (the old items which have a `timestamp` earlier than\n`lastVisitedTimestamp`) and the newer items.\n\nIf there are no newer items, the divider line will not be displayed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "last-visited-timestamp"
            }
        };
    }
    static get events() {
        return [{
                "method": "itemClick",
                "name": "itemClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when a feed item with `clickable` set to `true` is clicked"
                },
                "complexType": {
                    "original": "NotificationItem",
                    "resolved": "NotificationItem<unknown>",
                    "references": {
                        "NotificationItem": {
                            "location": "import",
                            "path": "./notification-item/notification-item.types",
                            "id": "src/components/notification-list/notification-item/notification-item.types.ts::NotificationItem",
                            "referenceLocation": "NotificationItem"
                        }
                    }
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "items",
                "methodName": "handleItemsChange"
            }];
    }
}
function parseToUTCDate(date) {
    if (typeof date === 'string') {
        return new Date(Date.parse(date));
    }
    return new Date(date); // This will automatically be UTC
}
