"use strict";
/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module Notification
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.MessageCenterField = void 0;
const React = require("react");
const core_frontend_1 = require("@itwin/core-frontend");
const appui_layout_react_1 = require("@itwin/appui-layout-react");
const MessageManager_1 = require("../messages/MessageManager");
const MessageSpan_1 = require("../messages/MessageSpan");
const UiFramework_1 = require("../UiFramework");
const core_react_1 = require("@itwin/core-react");
/** Enum for the [[MessageCenterField]] active tab
 * @internal
 */
var MessageCenterActiveTab;
(function (MessageCenterActiveTab) {
    MessageCenterActiveTab[MessageCenterActiveTab["AllMessages"] = 0] = "AllMessages";
    MessageCenterActiveTab[MessageCenterActiveTab["Problems"] = 1] = "Problems";
})(MessageCenterActiveTab || (MessageCenterActiveTab = {}));
/** Message Center Field React component.
 * @public
 */
class MessageCenterField extends React.Component {
    constructor(p) {
        super(p);
        this._indicator = React.createRef();
        this._title = UiFramework_1.UiFramework.translate("messageCenter.messages");
        this._handleMessagesUpdatedEvent = () => {
            // istanbul ignore else
            if (this._unloadMessagesUpdatedHandler)
                this.setState({ messageCount: MessageManager_1.MessageManager.messages.length });
        };
        this._handleOpenMessageCenterEvent = () => {
            this.setIsOpen(true);
        };
        this._handleClose = () => {
            this.setIsOpen(false);
        };
        this._handleOutsideClick = (e) => {
            if (!this._indicator.current ||
                !(e.target instanceof Node) ||
                this._indicator.current.contains(e.target))
                return;
            this._handleClose();
        };
        this._handleMessageIndicatorClick = () => {
            this.setIsOpen(!this.state.isOpen);
        };
        this._changeActiveTab = (tab) => {
            this.setState({ activeTab: tab });
        };
        this.state = {
            activeTab: MessageCenterActiveTab.AllMessages,
            target: null,
            messageCount: MessageManager_1.MessageManager.messages.length,
            isOpen: false,
        };
    }
    /** @internal */
    componentDidMount() {
        this._unloadMessagesUpdatedHandler =
            MessageManager_1.MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent, this);
        this._removeOpenMessagesCenterHandler =
            MessageManager_1.MessageManager.onOpenMessageCenterEvent.addListener(this._handleOpenMessageCenterEvent, this);
        MessageManager_1.MessageManager.registerAnimateOutToElement(this._indicator.current);
    }
    /** @internal */
    componentWillUnmount() {
        // istanbul ignore else
        if (this._unloadMessagesUpdatedHandler) {
            this._unloadMessagesUpdatedHandler();
            this._unloadMessagesUpdatedHandler = undefined;
        }
        // istanbul ignore else
        if (this._removeOpenMessagesCenterHandler) {
            this._removeOpenMessagesCenterHandler();
            this._removeOpenMessagesCenterHandler = undefined;
        }
    }
    render() {
        const tooltip = `${this.state.messageCount} ${this._title}`;
        const divStyle = { ...this.props.style, height: "100%" };
        const footerMessages = (React.createElement(React.Fragment, null,
            React.createElement("div", { className: this.props.className, style: divStyle, title: tooltip },
                React.createElement(appui_layout_react_1.MessageCenter, { indicatorRef: this._indicator, label: this._title, onClick: this._handleMessageIndicatorClick }, this.state.messageCount.toString())),
            React.createElement(appui_layout_react_1.FooterPopup, { isOpen: this.state.isOpen, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this._indicator.current },
                React.createElement(appui_layout_react_1.MessageCenterDialog, { prompt: UiFramework_1.UiFramework.translate("messageCenter.prompt"), tabs: React.createElement(React.Fragment, null,
                        React.createElement(appui_layout_react_1.MessageCenterTab, { isActive: this.state.activeTab === MessageCenterActiveTab.AllMessages, onClick: () => this._changeActiveTab(MessageCenterActiveTab.AllMessages) }, UiFramework_1.UiFramework.translate("messageCenter.all")),
                        React.createElement(appui_layout_react_1.MessageCenterTab, { isActive: this.state.activeTab === MessageCenterActiveTab.Problems, onClick: () => this._changeActiveTab(MessageCenterActiveTab.Problems) }, UiFramework_1.UiFramework.translate("messageCenter.errors"))), title: this._title }, this.getMessages()))));
        return footerMessages;
    }
    getMessages() {
        const messages = MessageManager_1.MessageManager.messages.slice(0).reverse();
        const tabRows = new Array();
        messages.forEach((details, index) => {
            /* istanbul ignore else */
            if (this.state.activeTab === MessageCenterActiveTab.AllMessages ||
                this.isProblemStatus(details.priority)) {
                const iconClassName = MessageManager_1.MessageManager.getIconClassName(details);
                const iconSpec = MessageManager_1.MessageManager.getIconSpecFromDetails(details);
                const message = details.briefMessage;
                tabRows.push(React.createElement(appui_layout_react_1.MessageCenterMessage, { key: index.toString(), icon: React.createElement(core_react_1.Icon, { iconSpec: iconSpec, className: iconClassName }) },
                    React.createElement(MessageSpan_1.MessageSpan, { message: message }),
                    details.detailedMessage && (React.createElement(React.Fragment, null,
                        React.createElement("br", null),
                        React.createElement(MessageSpan_1.MessageSpan, { className: "iui-text-small", message: details.detailedMessage })))));
            }
        });
        return tabRows;
    }
    isProblemStatus(priority) {
        // See priority values in DgnPlatform defined in NotificationManager
        if (priority === core_frontend_1.OutputMessagePriority.Error ||
            priority === core_frontend_1.OutputMessagePriority.Fatal)
            return true;
        return false;
    }
    setIsOpen(isOpen) {
        this.setState({ isOpen });
    }
}
exports.MessageCenterField = MessageCenterField;
//# sourceMappingURL=MessageCenter.js.map