/*---------------------------------------------------------------------------------------------
 * 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 classnames from "classnames";
import * as React from "react";
import { Centered } from "@itwin/core-react";
import { MessageManager } from "../messages/MessageManager";
import { ProgressLinear, Text } from "@itwin/itwinui-react";
import { useTranslation } from "../hooks/useTranslation";
/** Activity Center Field React component.
 * @public
 */
// eslint-disable-next-line deprecation/deprecation
export function ActivityCenterField(props) {
    const { translate } = useTranslation();
    const [message, setMessage] = React.useState("");
    const [percentage, setPercentage] = React.useState(0);
    const [isVisible, setIsVisible] = React.useState(true);
    React.useEffect(() => {
        return MessageManager.onActivityMessageUpdatedEvent.addListener((args) => {
            setMessage(args.message);
            setPercentage(args.percentage);
            setIsVisible(true);
        });
    }, []);
    React.useEffect(() => {
        return MessageManager.onActivityMessageCancelledEvent.addListener(() => {
            setIsVisible(false);
        });
    }, []);
    const openActivityMessage = () => {
        MessageManager.setupActivityMessageValues(message, percentage, true);
    };
    const isPercentageValid = percentage > 0 && percentage < 100;
    if (!isVisible || !isPercentageValid)
        return null;
    const moreDetails = translate("activityCenter.moreDetails");
    // eslint-disable-next-line @typescript-eslint/no-base-to-string
    const tooltip = `${message}-${moreDetails}`;
    return (
    // eslint-disable-next-line deprecation/deprecation
    React.createElement(Centered, { className: classnames("open-activity-message", props.className), style: {
            height: "100%",
            minWidth: 120,
            padding: "0 8px",
            alignItems: "end",
            ...props.style,
        }, onClick: openActivityMessage, title: tooltip },
        React.createElement(ProgressLinear, { style: {
                flex: "1",
            }, value: percentage, labels: [
                React.createElement(Text, { variant: "small", key: 0 },
                    percentage,
                    " ",
                    translate("activityCenter.percentComplete")),
            ] })));
}
//# sourceMappingURL=ActivityCenter.js.map