/*---------------------------------------------------------------------------------------------
 * 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 { Button, Icon, NotificationMarker, Tabs } from "@itwin/itwinui-react";
import { SvgChat, SvgInfo, SvgStatusError, SvgStatusSuccess, SvgStatusWarning, } 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 isErrorMessage = (message) => {
        return (message.priority === OutputMessagePriority.Error ||
            message.priority === OutputMessagePriority.Fatal);
    };
    React.useEffect(() => {
        return MessageManager.onOpenMessageCenterEvent.addListener(() => {
            handleOpenChange(true);
        });
    }, []);
    React.useEffect(() => {
        MessageManager.registerAnimateOutToElement(indicatorRef.current);
        return MessageManager.onMessagesUpdatedEvent.addListener(() => {
            const newMessages = MessageManager.messages;
            newMessages.length > 0 ? setNotify(true) : setNotify(false);
            setMessages(newMessages);
            const lastMessage = newMessages[newMessages.length - 1];
            if (!lastMessage)
                return;
            switch (lastMessage.priority) {
                case OutputMessagePriority.Success:
                    setStatus("positive");
                    break;
                case OutputMessagePriority.Warning:
                    setStatus("warning");
                    break;
                case OutputMessagePriority.Error:
                case OutputMessagePriority.Fatal:
                    setStatus("negative");
                    break;
                default:
                    setStatus("primary");
            }
        });
    }, []);
    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(isErrorMessage)
                            : 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) => {
                        return (React.createElement(MessageCenterMessage, { key: index, message: message.briefMessage, details: message.detailedMessage, icon: React.createElement(MessageIcon, { priority: message.priority }) }));
                    }))));
                }))) },
        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))));
}
function MessageIcon({ priority }) {
    switch (priority) {
        case OutputMessagePriority.Error:
        case OutputMessagePriority.Fatal:
            return (React.createElement(Icon, { fill: "negative" },
                React.createElement(SvgStatusError, null)));
        case OutputMessagePriority.Warning:
            return (React.createElement(Icon, { fill: "warning" },
                React.createElement(SvgStatusWarning, null)));
        case OutputMessagePriority.Info:
            return (React.createElement(Icon, { fill: "informational" },
                React.createElement(SvgInfo, null)));
    }
    return (React.createElement(Icon, { fill: "positive" },
        React.createElement(SvgStatusSuccess, null)));
}
//# sourceMappingURL=MessageCenterField.js.map