/*---------------------------------------------------------------------------------------------
 * 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
 */
import * as React from "react";
import { Icon } from "@itwin/core-react";
import { Button, NotificationMarker, Tabs } from "@itwin/itwinui-react";
import { SvgChat } from "@itwin/itwinui-icons-react";
import { OutputMessagePriority } from "@itwin/core-frontend";
import { MessageCenterMessage } from "./MessageCenterMessage";
import { MessageManager } from "../../messages/MessageManager";
import { TitleBar } from "../../layout/footer/dialog/TitleBar";
import "./MessageCenterField.scss";
import { useTranslation } from "../../hooks/useTranslation";
import { StatusBarPopover } from "../../statusbar/popup/StatusBarPopover";
const tabs = ["all", "errors"];
/** Message Center Field React component.
 * @public
 */
// eslint-disable-next-line deprecation/deprecation
export function MessageCenterField(props) {
    const [messages, setMessages] = React.useState(MessageManager.messages);
    const [notify, setNotify] = React.useState(false);
    const [isOpen, setIsOpen] = React.useState(false);
    const [status, setStatus] = React.useState("primary");
    const { translate } = useTranslation();
    const indicatorRef = React.useRef(null);
    const handleOpenChange = (isOpenState) => {
        setNotify(false);
        setIsOpen(isOpenState);
    };
    const isProblemStatus = (message) => {
        // See priority values in DgnPlatform defined in NotificationManager
        return (message.priority === OutputMessagePriority.Error ||
            message.priority === OutputMessagePriority.Fatal);
    };
    React.useEffect(() => {
        return MessageManager.onOpenMessageCenterEvent.addListener(() => {
            handleOpenChange(true);
        });
    }, []);
    React.useEffect(() => {
        const determineStatus = () => {
            const message = [...MessageManager.messages].pop();
            if (message) {
                if (isProblemStatus(message)) {
                    return setStatus("negative");
                }
                else if (message.priority === OutputMessagePriority.Success) {
                    return setStatus("positive");
                }
                else {
                    return setStatus("primary");
                }
            }
            return;
        };
        MessageManager.registerAnimateOutToElement(indicatorRef.current);
        return MessageManager.onMessagesUpdatedEvent.addListener(() => {
            MessageManager.messages.length > 0 ? setNotify(true) : setNotify(false);
            setMessages(MessageManager.messages);
            determineStatus();
        });
    }, []);
    return (React.createElement(StatusBarPopover, { visible: isOpen, onVisibleChange: (visible) => handleOpenChange(visible), className: "uifw-statusFields-messageCenter-messageCenterField_popover", content: React.createElement(React.Fragment, null,
            React.createElement(TitleBar, { title: translate("messageCenter.messages") }),
            React.createElement(Tabs.Wrapper, { type: "pill" },
                React.createElement(Tabs.TabList, null, tabs.map((tab) => (React.createElement(Tabs.Tab, { label: translate(`messageCenter.${tab}`), key: tab, value: tab })))),
                tabs.map((tab) => {
                    let tabMessages = [...messages].reverse();
                    tabMessages =
                        tab === "errors"
                            ? tabMessages.filter(isProblemStatus)
                            : tabMessages;
                    return (React.createElement(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) => {
                        const iconClassName = MessageManager.getIconClassName(message);
                        const iconSpec = MessageManager.getIconSpecFromDetails(message);
                        return (React.createElement(MessageCenterMessage, { key: index, message: message.briefMessage, details: message.detailedMessage, icon: React.createElement(Icon, { iconSpec: iconSpec, className: iconClassName }) }));
                    }))));
                }))) },
        React.createElement(Button, { ref: indicatorRef, styleType: "borderless", startIcon: React.createElement(NotificationMarker, { status: status, enabled: notify },
                React.createElement(SvgChat, null)), className: props.className, style: props.style },
            translate("messageCenter.messages"),
            React.createElement(StatusBarPopover.ExpandIndicator, null))));
}
//# sourceMappingURL=MessageCenterField.js.map