import { faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
import { h } from "@stencil/core";
import { EventBus } from "../../../utils/EventBus";
import { SidePanelSideEnum } from "../../visual/side-panel/side-panel.types";
import { NotificationsFeedEventsEnum } from "./notifications-feed.types";
export class NotificationsFeed {
    constructor() {
        this.isOpen = false;
        this.pendingTransactions = [];
        this.transactionsHistory = [];
        this.eventBus = new EventBus();
        this.closeEventTimeout = null;
        this.handleClose = () => {
            this.isOpen = false;
            this.eventBus.publish(NotificationsFeedEventsEnum.CLOSE_NOTIFICATIONS_FEED);
        };
        this.handleClear = () => {
            this.eventBus.publish(NotificationsFeedEventsEnum.CLEAR_NOTIFICATIONS_FEED_HISTORY);
        };
        this.handleViewAll = () => {
            this.isOpen = true;
        };
    }
    clearTimeouts() {
        if (this.closeEventTimeout) {
            clearTimeout(this.closeEventTimeout);
            this.closeEventTimeout = null;
        }
    }
    disconnectedCallback() {
        this.clearTimeouts();
        this.eventBus.unsubscribe(NotificationsFeedEventsEnum.PENDING_TRANSACTIONS_UPDATE, this.pendingTransactionsUpdate.bind(this));
        this.eventBus.unsubscribe(NotificationsFeedEventsEnum.TRANSACTIONS_HISTORY_UPDATE, this.transactionsHistoryUpdate.bind(this));
        this.eventBus.unsubscribe(NotificationsFeedEventsEnum.OPEN_NOTIFICATIONS_FEED, this.handleViewAll.bind(this));
    }
    async getEventBus() {
        return this.eventBus;
    }
    render() {
        var _a, _b, _c;
        const hasActivity = ((_a = this.transactionsHistory) === null || _a === void 0 ? void 0 : _a.length) > 0;
        const hasPending = ((_b = this.pendingTransactions) === null || _b === void 0 ? void 0 : _b.length) > 0;
        return (h("side-panel", { key: '83d8a67b73c129b8b9e5ee0dfa6cab6cda6187d1', isOpen: this.isOpen, side: SidePanelSideEnum.RIGHT, onClose: this.handleClose }, h("div", { key: 'c0d0703194b91926068c9ae185158433e631e113', class: "panel-header" }, h("h2", { key: '722f87e1501a1b4391a2cda0d35c469f1928419b', class: "panel-title" }, "Notifications Feed"), h("button", { key: '8c56f0ae2b140cbfb618f64a659ca75052f5278f', class: "close-button", onClick: this.handleClose }, h("fa-icon", { key: '0c8e670b53c128fe0ac6944faa2e15aa8b046675', icon: faTimes }))), h("div", { key: 'a058e46a656543aa53d4f4f16d4c427932652a60', class: "notifications-info" }, "This feed is stored in your browser and will be reset when a new session is started.", h("fa-icon", { key: '7d3e6d6c0d5de02b807c228b17f057344838f8bb', class: "info-icon", icon: faInfoCircle })), h("div", { key: '84343fd48bf237bffe43fa7a12d5ae37423be7bb', class: "notifications-container" }, hasPending && (h("div", { key: '6180017fbb3fd400d0f50538ba3defee11dae2ae' }, h("div", { key: 'deccb745bc44e2b8b9e7a2210a9d429c98d12da9', class: "processing-status" }, "Processing..."), (_c = this.pendingTransactions) === null || _c === void 0 ? void 0 :
            _c.map(toast => h("transaction-toast", Object.assign({}, toast)))))), h("div", { key: '1f9541b7950c5ee39e3062eca248334b1ed6091e', class: "activity-section" }, h("div", { key: 'acfd3fb2d1d970c467b6c392496e3262bd89566e', class: "activity-header" }, h("h3", { key: '5e86a93ad80d1e0420cb9613f680a8688ea34b1d', class: "activity-title" }, "Activity"), hasActivity && (h("button", { key: '2335ecde05ceaaada9809dccb265eeeba4bcc6f0', class: "clear-button", onClick: this.handleClear }, "Clear"))), h("div", { key: 'cd1e2960419ef8c217955cf79c8a73c0cd94b2c8', class: "activity-list" }, hasActivity ? this.transactionsHistory.map(transaction => h("transaction-list-item", { transaction: transaction })) : h("div", { class: "no-activity" }, "No activity to show")))));
    }
    pendingTransactionsUpdate(payload) {
        this.pendingTransactions = [...payload];
    }
    transactionsHistoryUpdate(payload) {
        this.transactionsHistory = [...payload];
    }
    componentDidLoad() {
        this.eventBus.subscribe(NotificationsFeedEventsEnum.PENDING_TRANSACTIONS_UPDATE, this.pendingTransactionsUpdate.bind(this));
        this.eventBus.subscribe(NotificationsFeedEventsEnum.TRANSACTIONS_HISTORY_UPDATE, this.transactionsHistoryUpdate.bind(this));
        this.eventBus.subscribe(NotificationsFeedEventsEnum.OPEN_NOTIFICATIONS_FEED, this.handleViewAll.bind(this));
    }
    static get is() { return "notifications-feed"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["notifications-feed.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["notifications-feed.css"]
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "pendingTransactions": {},
            "transactionsHistory": {}
        };
    }
    static get methods() {
        return {
            "getEventBus": {
                "complexType": {
                    "signature": "() => Promise<IEventBus>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "IEventBus": {
                            "location": "import",
                            "path": "utils/EventBus",
                            "id": "src/utils/EventBus.ts::IEventBus"
                        }
                    },
                    "return": "Promise<IEventBus>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
}
//# sourceMappingURL=notifications-feed.js.map
