"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MessageCenterField = void 0;
/*---------------------------------------------------------------------------------------------
 * 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
 */
const React = require("react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
const core_frontend_1 = require("@itwin/core-frontend");
const MessageCenterMessage_1 = require("./MessageCenterMessage");
const MessageManager_1 = require("../../messages/MessageManager");
const TitleBar_1 = require("../../layout/footer/dialog/TitleBar");
require("./MessageCenterField.scss");
const useTranslation_1 = require("../../hooks/useTranslation");
const StatusBarPopover_1 = require("../../statusbar/popup/StatusBarPopover");
const tabs = ["all", "errors"];
/** Message Center Field React component.
 * @public
 */
// eslint-disable-next-line deprecation/deprecation
function MessageCenterField(props) {
    const [messages, setMessages] = React.useState(MessageManager_1.MessageManager.messages);
    const [notify, setNotify] = React.useState(false);
    const [isOpen, setIsOpen] = React.useState(false);
    const [status, setStatus] = React.useState("primary");
    const { translate } = (0, useTranslation_1.useTranslation)();
    const indicatorRef = React.useRef(null);
    const handleOpenChange = (isOpenState) => {
        setNotify(false);
        setIsOpen(isOpenState);
    };
    const isErrorMessage = (message) => {
        return (message.priority === core_frontend_1.OutputMessagePriority.Error ||
            message.priority === core_frontend_1.OutputMessagePriority.Fatal);
    };
    React.useEffect(() => {
        return MessageManager_1.MessageManager.onOpenMessageCenterEvent.addListener(() => {
            handleOpenChange(true);
        });
    }, []);
    React.useEffect(() => {
        MessageManager_1.MessageManager.registerAnimateOutToElement(indicatorRef.current);
        return MessageManager_1.MessageManager.onMessagesUpdatedEvent.addListener(() => {
            const newMessages = MessageManager_1.MessageManager.messages;
            newMessages.length > 0 ? setNotify(true) : setNotify(false);
            setMessages(newMessages);
            const lastMessage = newMessages[newMessages.length - 1];
            if (!lastMessage)
                return;
            switch (lastMessage.priority) {
                case core_frontend_1.OutputMessagePriority.Success:
                    setStatus("positive");
                    break;
                case core_frontend_1.OutputMessagePriority.Warning:
                    setStatus("warning");
                    break;
                case core_frontend_1.OutputMessagePriority.Error:
                case core_frontend_1.OutputMessagePriority.Fatal:
                    setStatus("negative");
                    break;
                default:
                    setStatus("primary");
            }
        });
    }, []);
    return (React.createElement(StatusBarPopover_1.StatusBarPopover, { visible: isOpen, onVisibleChange: (visible) => handleOpenChange(visible), className: "uifw-statusFields-messageCenter-messageCenterField_popover", content: React.createElement(React.Fragment, null,
            React.createElement(TitleBar_1.TitleBar, { title: translate("messageCenter.messages") }),
            React.createElement(itwinui_react_1.Tabs.Wrapper, { type: "pill" },
                React.createElement(itwinui_react_1.Tabs.TabList, null, tabs.map((tab) => (React.createElement(itwinui_react_1.Tabs.Tab, { label: translate(`messageCenter.${tab}`), key: tab, value: tab })))),
                tabs.map((tab) => {
                    let tabMessages = [...messages].reverse();
                    tabMessages =
                        tab === "errors"
                            ? tabMessages.filter(isErrorMessage)
                            : tabMessages;
                    return (React.createElement(itwinui_react_1.Tabs.Panel, { value: tab, key: tab, className: "uifw-statusFields-messageCenter-messageCenterField_panel" }, tabMessages.length === 0 ? (React.createElement("span", { className: "uifw-message-prompt" }, translate("messageCenter.prompt"))) : (tabMessages.map((message, index) => {
                        return (React.createElement(MessageCenterMessage_1.MessageCenterMessage, { key: index, message: message.briefMessage, details: message.detailedMessage, icon: React.createElement(MessageIcon, { priority: message.priority }) }));
                    }))));
                }))) },
        React.createElement(itwinui_react_1.Button, { ref: indicatorRef, styleType: "borderless", startIcon: React.createElement(itwinui_react_1.NotificationMarker, { status: status, enabled: notify },
                React.createElement(itwinui_icons_react_1.SvgChat, null)), className: props.className, style: props.style },
            translate("messageCenter.messages"),
            React.createElement(StatusBarPopover_1.StatusBarPopover.ExpandIndicator, null))));
}
exports.MessageCenterField = MessageCenterField;
function MessageIcon({ priority }) {
    switch (priority) {
        case core_frontend_1.OutputMessagePriority.Error:
        case core_frontend_1.OutputMessagePriority.Fatal:
            return (React.createElement(itwinui_react_1.Icon, { fill: "negative" },
                React.createElement(itwinui_icons_react_1.SvgStatusError, null)));
        case core_frontend_1.OutputMessagePriority.Warning:
            return (React.createElement(itwinui_react_1.Icon, { fill: "warning" },
                React.createElement(itwinui_icons_react_1.SvgStatusWarning, null)));
        case core_frontend_1.OutputMessagePriority.Info:
            return (React.createElement(itwinui_react_1.Icon, { fill: "informational" },
                React.createElement(itwinui_icons_react_1.SvgInfo, null)));
    }
    return (React.createElement(itwinui_react_1.Icon, { fill: "positive" },
        React.createElement(itwinui_icons_react_1.SvgStatusSuccess, null)));
}
//# sourceMappingURL=MessageCenterField.js.map