var editor = document.querySelector("#editor");

var toolBar = null;
var contents = null;
var pageContent = null;
var saveButton = null;
var editorUI = null;


isReadOnly = function() {
    if (editor) {
        return editor.className == 'read-only';
    }
    return undefined;
}

setReadOnly = function() {
    pageContent.innerHTML = editorUI.getHTML();
    editorUI.changeMode('wysiwig');
    editorUI.blur();
    editor.classList.add('read-only');
    pageContent.contentEditable = false;
}

setEditable = function() {
    editor.classList.remove('read-only');
    pageContent.contentEditable = true;
    editorUI.moveCursorToStart();
    editorUI.focus();
}

makeMarkdownButton = function() {

    button = document.createElement('button');
    button.classList.add("toastui-editor-toolbar-icons");
    button.classList.add("last");
    button.ariaLabel = "Toggle Markdown";
    button.style.backgroundImage = 'none';
    button.innerHTML = 'MD';
    button.style.margin = '0';
    button.addEventListener('click', () => {
        if (editorUI.isMarkdownMode()) {
            editorUI.changeMode("wysiwig");
        } else {
            editorUI.changeMode("markdown");
        }
    });
    return button;
};

makeSaveButton = function() {
    const button = document.createElement('button');
    button.className = 'actions';
    button.innerHTML = 'save';
    button.id = 'saveButton';
    button.addEventListener('click', () => {
    });
    saveButton = button;
    return button;
};

toggleButton = function() {
    const button = document.createElement('button');
    button.className = 'actions';
    button.id = 'toggleButton';
    button.innerHTML = 'edit';
    button.addEventListener('click', () => {
        if (isReadOnly()) {
            setEditable();
        } else {
            setReadOnly();
        }
    });
    return button;
}

handleContentChange = function() {
}

initialize = function() {
    return new toastui.Editor({
        el: editor, 
        initialEditType: 'wysiwyg',
        initialValue: "",
        hideModeSwitch : true,
        previewStyle: 'vertical',
        usageStatistics: false,
        autofocus: false,
        toolbarItems: [
            ['heading', 'bold', 'italic' ],
            ['ul', 'ol', 'indent', 'outdent'],
            ['table', 'image', 'link'],
            [ 
                { el: makeMarkdownButton(), tooltip: 'Toggle MD' },
            ],
            [
                { el: makeSaveButton(), command: 'save', tooltip: 'Save Changes' },
                { el: toggleButton(), tooltip: 'Toggle Edit Mode' }
            ],
        ],
        events: {
            'loadUI': function(e) {
                editorUI = e;
                pageContent = document.querySelector(".toastui-editor-ww-container > div > div");
                toolBar = document.querySelector('.toastui-editor-toolbar');

                e.setMarkdown(document.getElementById("data_form__body").value);
                setReadOnly();

            },
            'changeMode': function() {
                if (editor && Array(editor.classList).includes('read-only')) {
                    setReadOnly();
                }
            },
            'change': handleContentChange,
        }
    });
};