// 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) {

        // Default style formats
        let styleFormats = [{title: 'Paragraaf', block: 'p'}, {title: 'Subtitel', block: 'h3'}, {title: 'Titel', block: 'h2'}];
        if(inputElement.dataset.styleFormats !== undefined) styleFormats = JSON.parse(inputElement.dataset.styleFormats);

        // Default style formats
        let contentCss = '/vendor/kms/tiny_content.css';
        if(inputElement.dataset.contentCss !== undefined) contentCss = inputElement.dataset.contentCss;

        // Default height
        let height = '300';
        if(inputElement.dataset.height !== undefined) height = inputElement.dataset.height;

        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 : contentCss,
            plugins: 'code paste link lists directionality',
            toolbar: 'styleselect | bold italic strikethrough | numlist bullist | link unlink | outdent indent | code ',
            height: height,
            paste_as_text: true,
            style_formats: styleFormats,
            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);
        }
    }
}