define([
    "dojo/_base/declare",
    "dojo/_base/config",
    "dojo/_base/lang",
    "dojo/_base/Deferred",
    "dojo/ready",
    "dojo/aspect",
    "dojo/dom",
    "dojo/dom-class",
    "dojo/request/script",
    "dojo/when",
    "dijit/form/Textarea",
    "epi/epi", 
    "epi/dependency",
    "epi-cms/widget/ContentSelectorDialog",
    "epi/shell/widget/dialog/Dialog",
    "xxx/editors/markdowneditor/simplemde/simplemde.min",
    "xstyle/css!./simplemde/simplemde.min.css",
    "xstyle/css!./template.css"
],

    function (
        declare,
        config,
        lang,
        Deferred,
        ready,
        aspect,
        dom,
        domClass,
        script,
        when,
        Textarea,
        epi,
        dependency,
        ContentSelectorDialog,
        Dialog,
        SimpleMDE
    ) {
        return declare([Textarea],
            {
                editor: null, 

                resize: function () {

                    this.inherited(arguments);

                    this._refreshEditor();
                },

                buildRendering: function () {

                    // Create container to simplify styling            
                    this.templateString = '
' + this.templateString + '
';

                    this.inherited(arguments);
                },

                startup: function () {
                    
                    this._refreshEditor();

                    this.inherited(arguments);
                },
                
                _openImageSelector: function () {

                    var contentRepositoryDescriptors = dependency.resolve("epi.cms.contentRepositoryDescriptors"),
                        roots = contentRepositoryDescriptors["media"].roots,
                        imageSelectorDialog = new ContentSelectorDialog({
                            canSelectOwnerContent: false,
                            showButtons: false,
                            roots: roots,
                            allowedTypes: ["episerver.core.icontentimage"],
                            showAllLanguages: true
                        }),
                        dialog = new Dialog({
                        title: "Select a image",
                        dialogClass: "epi-dialog-portrait",
                        content: imageSelectorDialog
                    });

                    dialog.show();

                    dialog.on("execute", lang.hitch(this, this._imageSelected));
                },

                _imageSelected: function () {

                    var codeMirror = this.editor.codemirror,
                        output = '![Test](http://test.se)';

                    codeMirror.replaceSelection(output);

                    var value = this.editor.value();
                    
                    this._set("value", value);

                    this.onChange(value);
                },
                
                _refreshEditor: function () {
                    
                    if (!this.editor) {

                        this.editor = new SimpleMDE({
                            element: this.textbox,
                            placeholder: this.tooltip,
                            spellChecker: false,
                            initialValue: this.value,
                            forceSync: true,
                            status: ["lines", "words"],
                            toolbar: [
                                "bold",
                                "italic",
                                "heading",
                                "unordered-list",
                                "ordered-list",
                                "link",
                                {
                                    name: "Image",
                                    action: lang.hitch(this, this._openImageSelector),
                                    className: "fa fa-image",
                                    title: "Insert image"
                                },
                                "preview"]
                        });
                    }
                    
                    if (typeof this.value !== 'object' && !epi.areEqual(this.editor.value(), this.value)) {
                        this.editor.value(this.value);
                    }

                    this.editor.codemirror.refresh();
                }
            });
    });