import * as React from "react";
import * as ReactDOM from "react-dom";
import TinyMCE from 'react-tinymce';

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// A theme is also required
import 'tinymce/themes/modern/theme';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/lists';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/colorpicker';

require.context(
    'file?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/skins',
    true,
    /.*/
);

// Initialize the app
tinymce.init({
    selector: '.tiny',
    plugins: ['lists', 'textcolor', 'colorpicker']
});

export function generateHtmlRedactor(content: string, plugins: string | boolean, toolbar: string | boolean, callback: (e: any) => void, readonly: number = 0,): JSX.Element {
    return(
        <TinyMCE
            content={content}
            config={{
                menubar: false,
                plugins: plugins,
                toolbar: toolbar,
                readonly: readonly
            }}
            onChange={callback}
        />
    );
}