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

        // Define the 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);

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

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

        // Define the default color map and custom color
        let colorMap = [];
        let customColor = false;

        // Define the plugin
        let plugin = 'code paste link lists directionality';

        // Define the toolbar
        let toolbar = 'styleselect | bold italic strikethrough | numlist bullist | link unlink | outdent indent';

        // If forecolor pick append to the toolbar
        if(inputElement.dataset.forecolorPicker === 'true') {
            toolbar += ' | forecolor';

            // Also set the color map and custom color
            colorMap = JSON.parse(inputElement.dataset.colorMap);
            customColor = (inputElement.dataset.customColor === 'true');
        }

        // If with emoticons append to the toolbar
        if(inputElement.dataset.emoticons === 'true') {
            plugin += ' emoticons';
            toolbar += ' | emoticons';
        }

        // At least add the code editor to the toolbar
        toolbar += ' | code';

        debugger;

        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: plugin,
            toolbar: toolbar,
            height: height,
            paste_as_text: true,
            style_formats: styleFormats,
            language_url: '/vendor/kms/js/tinymce_languages/' + language + '.js',
            language: language,
            convert_urls: false,

            color_map: colorMap,
            custom_colors: customColor,

            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);
        }
    }
}