"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.InputFieldMessage = void 0;
require("./InputField.scss");
const classnames_1 = require("classnames");
const React = require("react");
const core_frontend_1 = require("@itwin/core-frontend");
const appui_abstract_1 = require("@itwin/appui-abstract");
const core_react_1 = require("@itwin/core-react");
const MessageManager_1 = require("../messages/MessageManager");
const MessageSpan_1 = require("./MessageSpan");
const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
/** InputField message pops up near pointer when attempting an invalid interaction.
 * @public
 */
class InputFieldMessage extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            message: "",
            isVisible: false,
            priority: core_frontend_1.OutputMessagePriority.None,
            showCloseButton: !!this.props.showCloseButton,
        };
        this._onInputMessageClose = () => {
            this.setState({ isVisible: false });
        };
        this._handleInputFieldMessageAddedEvent = (args) => {
            this.setState({
                inputFieldElement: args.target,
                message: args.messageText,
                isVisible: true,
                priority: args.priority,
                detailedMessage: args.detailedMessage,
            });
        };
        this._handleInputFieldMessageRemovedEvent = () => {
            this.setState({ isVisible: false });
        };
    }
    render() {
        const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton, } = this.state;
        if (!inputFieldElement || !message) {
            return null;
        }
        let iconComponent = React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null);
        switch (priority) {
            case core_frontend_1.OutputMessagePriority.Warning:
                iconComponent = React.createElement(itwinui_icons_react_1.SvgStatusWarning, null);
                break;
            case core_frontend_1.OutputMessagePriority.Error:
                iconComponent = React.createElement(itwinui_icons_react_1.SvgStatusError, null);
                break;
            case core_frontend_1.OutputMessagePriority.Info:
                iconComponent = React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null);
                break;
        }
        return (React.createElement(core_react_1.Popup, { isOpen: isVisible, position: appui_abstract_1.RelativePosition.BottomLeft, onClose: this._onInputMessageClose, target: inputFieldElement },
            React.createElement("div", { className: "uifw-popup-message-inputField" },
                React.createElement("div", { className: "uifw-popup-message-inputField-content" },
                    React.createElement("div", { className: "uifw-popup-message-inputField-primary" },
                        iconComponent && (React.createElement("span", { className: "uifw-popup-message-icon" },
                            " ",
                            React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon") }, iconComponent),
                            " ")),
                        React.createElement("span", { className: "uifw-popup-message-text" },
                            React.createElement(MessageSpan_1.MessageDiv, { className: "uifw-popup-message-brief", message: message }),
                            detailedMessage && (React.createElement(MessageSpan_1.MessageDiv, { className: "uifw-popup-message-detailed", message: detailedMessage }))))),
                showCloseButton && (
                // eslint-disable-next-line jsx-a11y/click-events-have-key-events
                React.createElement("div", { className: "uifw-popup-message-close", onClick: this._onInputMessageClose, role: "button", tabIndex: -1 },
                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) }))))));
    }
    componentDidMount() {
        MessageManager_1.MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);
        MessageManager_1.MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);
    }
    componentWillUnmount() {
        MessageManager_1.MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);
        MessageManager_1.MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);
    }
}
exports.InputFieldMessage = InputFieldMessage;
//# sourceMappingURL=InputField.js.map