// https://github.com/JefMari/awesome-wysiwyg-editors#standalone
class RichTextWidget {

    constructor() {
        this.editor = null;
        this.isDirty = false;
        this.currentEditorElement = null;
        this.currentHiddenSourceElement = null;
        this.initialize();
    }

    initialize() {
        document.addEventListener('click', this.onClick.bind(this))
    }

    /**
     * @param {PointerEvent} event
     */
    onClick(event) {
        let target = event.target
        let element;

        if ((element = target.closest('[data-rich-text]'))) {
            let editorId = element.dataset.destId
            let editorElement = document.getElementById(editorId);

            const config = {
                toolbar: {
                    shouldNotGroupWhenFull: true
                }
            };

            ClassicEditor
                .create(editorElement, config)
                .then(editor => {
                    this.editor = editor;
                    this.currentEditorElement = editorElement;
                    this.currentHiddenSourceElement = element;
                    this.currentHiddenSourceElement.classList.add('d-none');
                    this.handleStatusChanges();
                })
                .catch(error => {
                    console.error(error);
                });
        } else if (!target.closest('.ck')) {
            if (this.editor) {
                this.editor.destroy()
                this.editor = null;
                this.currentHiddenSourceElement.classList.remove('d-none');
            }
        }
    }

    handleStatusChanges() {
        this.editor.model.document.on('change:data', () => {
            this.isDirty = true;
            this.editor.updateSourceElement(this.editor.getData());
            this.currentHiddenSourceElement.innerHTML = this.editor.getData();
        });

    }

}