import React, { useEffect, useState } from 'react';
import RichTextEditor from 'rich-text-editor';
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrashCan } from '@fortawesome/free-solid-svg-icons';
export function Popup(props) {
    const popupRef = React.createRef();
    const [textContent, setTextContent] = useState(props.initialTextContent || '');
    const [saveEnabled, setSaveEnabled] = useState(props.initialTextContent.length > 0);
    const [verifyDelete, setVerifyDelete] = useState(false);
    const [valueError, setValueError] = useState(null);
    const [saveError, setSaveError] = useState();
    useEffect(() => {
        var _a;
        showAndPositionElement(props.element, popupRef);
        const child = (_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.rich-text-editor');
        if (child) {
            ;
            child.focus();
        }
    }, [props.element]);
    const errorMessage = valueError !== null && valueError !== void 0 ? valueError : saveError;
    return (React.createElement("div", { className: "e-popup", style: { position: 'absolute', opacity: 0 }, ref: popupRef, "data-testid": "e-popup" },
        React.createElement(RichTextEditor, { language: "FI", baseUrl: '', initialValue: props.initialTextContent, getPasteSource: () => Promise.resolve(''), onValueChange: value => {
                setValueError(null);
                if (props.onValueChange) {
                    const error = props.onValueChange(value.answerHtml);
                    setValueError(error);
                }
                setTextContent(value.answerHtml);
                setSaveEnabled(value.answerHtml.trim().length > 0);
            }, textAreaProps: {
                className: 'comment-content'
            } }),
        ' ',
        errorMessage && React.createElement("span", { className: "e-popup-error" }, errorMessage),
        React.createElement("span", { className: "e-popup-button-area" },
            React.createElement("span", null,
                React.createElement("button", { className: "button", onClick: e => {
                        e.stopPropagation();
                        setSaveError(undefined);
                        void props.onValueSave(textContent).then(setSaveError);
                    }, "data-testid": "e-popup-save", disabled: !saveEnabled || !!valueError }, "Tallenna"),
                React.createElement("button", { className: "button text-button", "data-testid": "e-popup-cancel", onClick: () => {
                        props.onCancel();
                    } }, "Peru")),
            props.enableDelete && (React.createElement("button", { className: classNames('button', 'e-popup-delete', 'round', { confirm: verifyDelete }), "data-testid": "e-popup-delete", onClick: () => {
                    if (!verifyDelete) {
                        setVerifyDelete(true);
                    }
                    else {
                        if (props.onDelete) {
                            props.onDelete();
                        }
                    }
                } },
                React.createElement(FontAwesomeIcon, { size: "lg", icon: faTrashCan, fixedWidth: true }),
                " ",
                verifyDelete && 'Vahvista?')))));
}
export function showAndPositionElement(mark, popupRef) {
    const popup = popupRef.current;
    if (popup) {
        const style = popup.style;
        const markRect = mark === null || mark === void 0 ? void 0 : mark.getBoundingClientRect();
        const popupRect = popup.getBoundingClientRect();
        const top = markRect.height + markRect.top + window.scrollY;
        const windowWidth = window.innerWidth;
        style.top = `${String(top)}px`;
        style.opacity = '1';
        const popupHitsWindowRight = markRect.left + popupRect.width > windowWidth;
        if (popupHitsWindowRight) {
            style.left = `${markRect.right - popupRect.width}px`;
        }
        else {
            style.left = `${markRect.left}px`;
        }
    }
}
//# sourceMappingURL=Popup.js.map