/**
 * Copyright JS Foundation and other contributors, http://js.foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/
RED.editor.types._markdown = (function() {


    var template = '<script type="text/x-red" data-template-name="_markdown">'+
    '<div id="node-input-markdown-panels">'+
    '<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+
        '<div class="node-text-editor" style="height: calc(100% - 20px)" id="node-input-markdown"></div>'+
    '</div>'+
    '<div class="red-ui-panel">'+
        '<div id="node-input-markdown-panel-preview" style="padding: 20px;" class="node-help"></div>'+
    '</div>'+
    '</script>';


    var panels;

    return {
        init: function() {
            $(template).appendTo(document.body);
        },
        show: function(options) {
            var value = options.value;
            var onComplete = options.complete;
            var type = "_markdown"
            RED.view.state(RED.state.EDITING);
            var expressionEditor;

            var trayOptions = {
                title: options.title,
                width: options.width||Infinity,
                buttons: [
                    {
                        id: "node-dialog-cancel",
                        text: RED._("common.label.cancel"),
                        click: function() {
                            RED.tray.close();
                        }
                    },
                    {
                        id: "node-dialog-ok",
                        text: RED._("common.label.done"),
                        class: "primary",
                        click: function() {
                            onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
                            RED.tray.close();
                        }
                    }
                ],
                resize: function(dimensions) {
                    var width = $("#dialog-form").width();
                    if (panels) {
                        panels.resize(width);
                    }

                },
                open: function(tray) {
                    var trayBody = tray.find('.editor-tray-body');
                    trayBody.addClass("node-input-markdown-editor")
                    var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
                    expressionEditor = RED.editor.createEditor({
                        id: 'node-input-markdown',
                        value: value,
                        mode:"ace/mode/markdown"
                    });
                    var changeTimer;
                    expressionEditor.getSession().on("change", function() {
                        clearTimeout(changeTimer);
                        changeTimer = setTimeout(function() {
                            var currentScrollTop = $("#node-input-markdown-panel-preview").scrollTop();
                            $("#node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
                            $("#node-input-markdown-panel-preview").scrollTop(currentScrollTop);
                        },200);
                    })
                    if (options.header) {
                        options.header.appendTo(tray.find('#node-input-markdown-title'));
                    }

                    if (value) {
                        $("#node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
                    }
                    panels = RED.panels.create({
                        id:"node-input-markdown-panels",
                        dir: "horizontal",
                        resize: function(p1Width,p2Width) {
                            expressionEditor.resize();
                        }
                    });

                    if (options.cursor) {
                        expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
                    }

                    dialogForm.i18n();
                },
                close: function() {
                    expressionEditor.destroy();
                    if (options.onclose) {
                        options.onclose();
                    }
                },
                show: function() {}
            }
            RED.tray.show(trayOptions);

        }
    }
})();