import * as React from 'react';
import AceEditor from 'react-ace';
import { useState, useEffect } from 'react';
import { Message } from 'semantic-ui-react';
import 'brace/mode/text';
import 'brace/mode/markdown';
import 'brace/theme/github';
import 'brace/theme/terminal';
export var createRichTextEditor = function (cfg) {
    return function (props) {
        var _a = useState(props.value), value = _a[0], setValue = _a[1];
        var _b = useState(undefined), error = _b[0], setError = _b[1];
        useEffect(function () {
            setValue(props.value);
        }, [props.value]);
        var onChange = function (txt) {
            try {
                setValue(txt);
                props.onChange(txt);
                setError(undefined);
            }
            catch (error) {
                setError([error.message]);
                props.onSetError(error.message);
            }
        };
        var handleOnValidate = function (errValue) {
            if (errValue && errValue.length > 0) {
                setError(errValue.map(function (v) { return "ROW: " + v.row + " - COLUMN: " + v.column + " : " + v.text; }));
            }
            else {
                setError(undefined);
                // this.errors = undefined;
            }
        };
        return <><AceEditor theme={cfg.theme || 'github'} readOnly={false} fontSize={14} showPrintMargin={false} showGutter={true} highlightActiveLine={true} editorProps={{ $blockScrolling: true }} setOptions={{ showLineNumbers: true }} style={props.style} mode={cfg.mode || 'text'} {...cfg.richEditorProps} value={value} onChange={onChange} onValidate={handleOnValidate}/>
      {error && <Message negative><ul>{error.map((function (e, i) { return <li key={i}>{e}</li>; }))}</ul></Message>}
    </>;
    };
};