"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NoteEditor = void 0;
const tslib_1 = require("tslib");
const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
const React = tslib_1.__importStar(require("react"));
const Textarea_1 = tslib_1.__importDefault(require("../../components/Textarea"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const AdaptableContext_1 = require("../AdaptableContext");
const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
    const { api } = (0, AdaptableContext_1.useAdaptable)();
    const showPopupCloseButton = api.optionsApi.getNoteOptions()?.showPopupCloseButton ?? true;
    const textAreaRef = React.useRef(null);
    const [liveValue, setLiveValue] = React.useState(note || '');
    const throttledOnChange = React.useMemo(() => {
        const throttled = (0, throttle_1.default)((value) => onNoteChange(value), 300);
        return (value) => {
            setLiveValue(value);
            throttled(value);
        };
    }, []);
    React.useEffect(() => {
        if (editMode) {
            textAreaRef.current?.focus();
        }
    }, [editMode]);
    if (note === undefined || note === null) {
        return null;
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(Textarea_1.default, { readOnly: isReadonly, ref: textAreaRef, width: "100%", minWidth: 180, minHeight: 120, style: { paddingRight: showPopupCloseButton ? 30 : 0 }, value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {
                if (event.key === 'Escape') {
                    onClose();
                }
            }, onChange: (event) => throttledOnChange(event.target.value) }),
        showPopupCloseButton && (React.createElement(SimpleButton_1.default, { variant: "text", style: { position: 'absolute', right: 5, top: 5 }, icon: "close" }))));
};
exports.NoteEditor = NoteEditor;
