/*---------------------------------------------------------------------------------------------
 * 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 "./InputField.scss";
import classnames from "classnames";
import * as React from "react";
import { OutputMessagePriority } from "@itwin/core-frontend";
import { RelativePosition } from "@itwin/appui-abstract";
import { Icon, Popup } from "@itwin/core-react";
import { MessageManager } from "../messages/MessageManager";
import { MessageDiv } from "./MessageSpan";
import { SvgClose, SvgInfoCircularHollow, SvgStatusError, SvgStatusWarning, } from "@itwin/itwinui-icons-react";
/** InputField message pops up near pointer when attempting an invalid interaction.
 * @public
 */
export class InputFieldMessage extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            message: "",
            isVisible: false,
            priority: 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(SvgInfoCircularHollow, null);
        switch (priority) {
            case OutputMessagePriority.Warning:
                iconComponent = React.createElement(SvgStatusWarning, null);
                break;
            case OutputMessagePriority.Error:
                iconComponent = React.createElement(SvgStatusError, null);
                break;
            case OutputMessagePriority.Info:
                iconComponent = React.createElement(SvgInfoCircularHollow, null);
                break;
        }
        return (React.createElement(Popup, { isOpen: isVisible, position: 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: classnames("icon", "core-svg-icon") }, iconComponent),
                            " ")),
                        React.createElement("span", { className: "uifw-popup-message-text" },
                            React.createElement(MessageDiv, { className: "uifw-popup-message-brief", message: message }),
                            detailedMessage && (React.createElement(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(Icon, { iconSpec: React.createElement(SvgClose, null) }))))));
    }
    componentDidMount() {
        MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);
        MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);
    }
    componentWillUnmount() {
        MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);
        MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);
    }
}
//# sourceMappingURL=InputField.js.map