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

// A theme is also required
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/directionality';

import {createNewEvent, dispatchEventForElement} from "./polyfills/eventPolyFill";

export class TinyMCEController
{
    /**
     * @param { HTMLElement} inputElement
     * @param { string } language
     */
    static setup(inputElement, language) {
        console.log('vendor/kms/js/' + language + '.js');

        tinymce.remove('#'+inputElement.id.replace(/\|/g, "\\|")); //Removes the previous tiny mce editor instance if any. Only works when passign a valid escaped id.
        tinymce.init({
            target: inputElement,
            menubar: false,
            statusbar: false,
            content_css : '/vendor/kms/tiny_content.css',
            plugins: 'code paste link lists directionality',
            toolbar: 'styleselect | bold italic strikethrough | numlist bullist | link unlink | outdent indent | code ',
            height: '300',
            paste_as_text: true,
            style_formats: [{title: 'Paragraaf', block: 'p'}, {title: 'Subtitel', block: 'h3'}, {title: 'Titel', block: 'h2'}],
            language_url: '/vendor/kms/js/tinymce_languages/' + language + '.js',
            language: language,
            convert_urls: false,
            setup: function(editor) {
                editor.on('change', function(changeEvent) {
                    // ensure the current element is passed, not just the last one
                    (function(input) {
                        console.log(input.value);
                        return updateOriginalInput(editor, input);
                    })(inputElement)
                });
            }
        });

        function updateOriginalInput(tinyMceEditor, inputElement) {
            console.log('updated!');
            tinyMceEditor.save();
            let changeEvent = createNewEvent('change');
            dispatchEventForElement(inputElement, changeEvent);
        }
    }
}