import React from 'react';
import RichTextToolbarButton from './RichTextToolbarButton';
import RichTextInputAreaLinkForm from '../Form/RichTextInputAreaLinkForm';
import PopoverNext from '../../PopoverNext';
import Box from '../../Box';
class RichTextToolbarLinkButton extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            isFormShown: false,
        };
        /*
        When clicking the button, one of the following occurs:
        1. If the selected text does not contain a link, it will show the link insertion form
        2. If the selected text contains a link, it will detach that link from the text
        */
        this._onButtonClick = () => {
            const { onRemove, data } = this.props;
            const { hasRemovableEntityInSelection } = data;
            // Checks if the selected text does not contain a link
            if (!hasRemovableEntityInSelection) {
                this.setState({ isFormShown: true });
            }
            else {
                onRemove();
            }
        };
        this._onSubmit = (event, linkData) => {
            const { onSubmit } = this.props;
            onSubmit(event, linkData);
            this._onHide();
        };
        this._onHide = () => {
            this.setState({ isFormShown: false });
        };
    }
    render() {
        const { dataHook, tooltipText, isDisabled, isActive, children, data } = this.props;
        const { isFormShown } = this.state;
        const { selectedText } = data;
        return (React.createElement(PopoverNext, { appendTo: "window", placement: "bottom", showArrow: true, open: isFormShown, onOpenChange: (open, reason) => {
                if (!open &&
                    (reason === 'outside-press' || reason === 'escape-key')) {
                    this._onHide();
                }
            } },
            React.createElement(PopoverNext.Trigger, null,
                React.createElement("span", null,
                    React.createElement(RichTextToolbarButton, { dataHook: dataHook, onClick: this._onButtonClick, tooltipText: tooltipText, isDisabled: isDisabled, isActive: isActive || this.state.isFormShown }, children))),
            React.createElement(PopoverNext.Content, null,
                React.createElement(Box, { padding: 3, width: "216px" },
                    React.createElement(RichTextInputAreaLinkForm, { dataHook: "richtextarea-form", onSubmit: this._onSubmit, onCancel: this._onHide, data: { text: selectedText } })))));
    }
}
export default RichTextToolbarLinkButton;
//# sourceMappingURL=RichTextToolbarLinkButton.js.map