define([
    'modules/test/testItemOverlay/views/DragAndDropInputsView',
    'modules/test/testItemOverlay/views/DragAndDropIntoTextView',
    'modules/test/testItemOverlay/views/AlternativesInputsView',
    'modules/test/testItemOverlay/views/CodeTestInputsView',
    'modules/test/testItemOverlay/views/MultimediaInputView',
    'coms/AppParams',
    'coms/JUIOverlay',
    'libs/jquery.alterclass',
    'utils/FormUtils'
], function(
        DragandDropInputsView,
        DragandDropIntoTextView,
        AlternativesInputsView,
        CodeTestInputsView,
        MultimediaInputView,
        AppParams,
        JUIOverlay,
        jquery_alterclass,
        FormUtils
        ) {
    return Backbone.View.extend({
        el: '#test_item_overlay',
        widget: null,
        dragDropInputs: null,
        alternativesInputs: null,
        multimediaInputs: null,
        modelId: null,
        modelDatas : [],
        form: {
            el: '#item_form',
            $el: $('#item_form')
        },

        /**
         *
         */
        initialize: function() {

            var self = this;

            self.opts = AppParams.getOpts('TestItemOverlay');
            JUIOverlay.init(self.$el, {cssClass: 'test-item-overlay', scrollParent: null}); // let CtvTestOverlay control de overflow event;
            self.widget = self.$el.dialog('widget');

            self.alternativesInputs = new AlternativesInputsView();
            self.codeTestInputs = new CodeTestInputsView();
            self.dragDropInputs = new DragandDropInputsView();
            self.multimediaInputs = new MultimediaInputView();
            self.dragDropIntoTextInputs = new DragandDropIntoTextView();
            self.$el.on('dialogclose', function() {
                self.reset();
            });

        },

        /**
         *
         */
        events: {
            'submit #item_form': function(e) {
                e.preventDefault();

                var self = this,
                    $itemAlternatives = $(e.currentTarget).find('.item-input-alternative');

                self.validateInfo() && self.validateContent().done(function () {

                    if (self.form.$el.data('state') !== 'submitting' && $itemAlternatives.length != 0) {

                        var itemAlternativesCount = $itemAlternatives.find('.alternative-check:checked').length;

                        if (itemAlternativesCount === 0 || itemAlternativesCount > 1) {

                            var $itemWithoutAlternatives  = $('.js-item-without-alternatives'),
                                $itemWithManyAlternatives = $('.js-item-with-many-alternatives');

                            $('.js-item-alternatives').hide();

                            $('.js-item-alternatives-msg').show();
                            $('.js-item-form-submit').prop("disabled", true );

                            self.form.$el.data('state', 'submitting');

                            if (itemAlternativesCount === 0) {
                                $itemWithoutAlternatives.show();
                            } else {
                                $itemWithManyAlternatives.show();
                            }

                            return false;
                        }
                    }

                    self.$('.is-redactor').redactor('sync');
                    self.form.$el.addClass('loading');
                    $.ajax({

                        url: AppParams.getAppUrl('items', self.modelId),
                        type: self.modelId ? 'PUT' : 'POST',
                        data: self.form.$el.serializeArray().concat(self.modelDatas),
                        dataType: 'json'

                    }).done(function(model) {

                        showMsg !== undefined && showMsg(self.opts.i18n.itemSaveSuccess);

                        self.modelId = model.id;
                        self.$el.dialog('close');
                        self.trigger('testItem:saved', model);

                    }).fail(function(xhr) {

                        showError(xhr.responseText);
                        console.log(xhr);

                    }).always(function() {
                        self.form.$el.removeClass('loading');
                        self.resetItemAlternativesWarnings();
                    });

                });
            },

            'change #itemResponseTypeSelect': function(e) {
                var selValue = $(e.currentTarget).val(), type;
                $("#content_activity").hide();
                $("#content_question").show();
                $('#radio-content').addClass('hidden');
                $('#content-normal').removeClass('hidden');
                $('#content-multimedia').addClass('hidden');
                if (selValue == 1 || selValue == 2) {
                    type = 'alternative';
                } else if (selValue == 3) {
                    type = 'free';
                } else if (selValue == 4) {
                    type = 'exact';
                } else if (selValue == 5) {
                    type = 'upload';
                } else if (6 <= selValue && selValue <= 9) {
                    type = 'code';
                } else if (selValue == 10) {
                    type = 'dragdrop';
                    $("#content_activity").show();
                    $("#content_question").hide();
                } else if(selValue == 11) {
                    type = 'multimedia';
                    $('#radio-content').removeClass('hidden');
                    $('#content-normal').addClass('hidden');
                    $('#content-multimedia').removeClass('hidden');
                }

                this.renderInputs(type);
            },
            'click #btn-add-element': function(e) {

                var self = this;
                e.preventDefault();
                var valComboBox = $('#element-item').find(':selected').text();
                var idCombobox = $('#element-item').find(':selected').val();
                $.ajax({

                    url: AppParams.getAppUrl('elements'),
                    data: {elementId: idCombobox},
                    dataType: 'json'

                }).done( function(model){

                    var audioUrl = model.audio_url;
                    var imageUrl = model.img_url;
                    alert(audioUrl);
                    var stringHtml = valComboBox+ "<audio autoplay><source src='[URL_BASE]/"+audioUrl+"' /></audio>";
                    var imgHtml = "<div id='imgEnunciateContainer'>"+valComboBox+"<img id='imgEnunciate' class='hidden' src='[URL_BASE]/"+imageUrl+"'></div>";
                    alert(imgHtml);
                    self.$el.find('#Item_content').redactor(self.opts.redactor).redactor('set',imgHtml);

                }).error(function(error){

                    console.log(error);

                });

            },
            'change #typeAnswer': function(e) {
                var self = this;
                var selValue = $(e.currentTarget).val();
                if(selValue == 1) {
                    self.$el.find('#itemMultimediaWrapper').removeClass('hidden');
                    self.$el.find('#itemAnswerInputWrapper').hide();
                } else if(selValue == 0) {
                    self.$el.find('#itemMultimediaWrapper').addClass('hidden');
                    self.$el.find('#itemAnswerInputWrapper').show();
                }
            },
            'click .toggle-form-container': 'toggleFormContainer',

            'click .js-cancel-submit': function () {
                this.resetItemAlternativesWarnings();
            },
            'click #Item_custom_settings_is_sorting_1:checked':function(evt){
                    $("#content_activity").show();
                    $("#content_question").hide();
                    $(".contentQuestionContainer").show();
                    $(".contentQuestionMatchingContainer").hide();
                    $(".dragdropListContainer").hide();
                    $("#excludedTermsContainer").hide();
                    $("#infoIntoTextContainer").hide();
                    //$("#infoIntoTextContainer").show();
                    $("#containerExcludedInfotext").hide();
                    $("#checkIsHorizontalContainer").hide();
                    $("#checkIsHorizontal").prop("checked",false);


            },
            'click #Item_custom_settings_is_sorting_0:checked':function(evt){
                    $("#content_activity").show();
                    $("#content_question").hide();
                    $(".contentQuestionContainer").hide();
                    $(".contentQuestionMatchingContainer").show();
                    $(".dragdropListContainer").show();
                    $("#excludedTermsContainer").show();
                    $("#containerExcludedInfotext").show();
                    $("#infoIntoTextContainer").hide();
                    //$(".dragdropListIntoTextContainer").hide();
                    $("#checkIsHorizontalContainer").show();
                    $("#checkIsHorizontal").prop("checked",true);



            },
            'keyup #sentenceTextArea':function (evt) {
                var self = this;

                var texto = $(evt.target).val();
                self.setPreview(texto);
            },
            'keyup .responseTerm':function (evt) {
                var self = this;
                var texto = $("#sentenceTextArea").val();
                self.setPreview(texto);
            }


        },

        toggleFormContainer : function () {
            $('.toggle-form-container').toggleClass('toggled');
            $('.form-section').toggleClass('collapse');
        },

        showFormContainer : function () {
            $('.toggle-form-container').removeClass('toggled');
            $('.form-section').removeClass('collapse');
        },

        hideFormContainer : function () {
            $('.toggle-form-container').addClass('toggled');
            $('.form-section').addClass('collapse');
        },

        resetItemAlternativesWarnings : function () {
            $('.js-item-alternatives-msg').hide().find('.js-item-alternatives').hide();
            $('.js-item-form-submit').prop( "disabled", false);
            this.form.$el.data('state',null);

            return this;
        },

        open: function(opts) {
            var self = this, i18n = self.opts.i18n;
            self.modelId = opts.modelId;
            self.$el.dialog('open').dialog('option', 'title', i18n[(self.modelId ? 'update' : 'create') + 'Item']);
            if (self.modelId) {

                self.form.$el.addClass('loading');
                $.ajax({
                    url: AppParams.getAppUrl('items'),
                    data: {id: self.modelId},
                    dataType: 'json'
                }).done(function(data) {
                    FormUtils.setValues(data.item, 'Item', self.form.$el);
                    data.itemParameter[0] !== undefined && FormUtils.setValues(data.itemParameter[0], 'ItemParameter', self.form.$el);
                    if(data.gradingScale.type == 1){
                        self.$el.find('.js-weighting').removeClass("hidden")
                    }
                    self.alternativesInputs.render(data.itemAlternatives);
                    self.codeTestInputs.render(data.itemCodeTests);
                    if(data.itemTerms.length > 0){
                        if(data.itemTerms[0].type == "1"){ // sentence
                             data.itemTerms.map(function(terms, ind){
                                terms.link = JSON.parse(terms.link)[0];
                            });
                            self.dragDropIntoTextInputs.render(data.itemTerms);
                            //self.dragDropInputs.render();
                        }else{ // matching

                            self.dragDropInputs.render(data.itemTerms);
                            //self.dragDropIntoTextInputs.render();

                        }
                    }

                    self.codeTestInputs.renderCodeEditor();

                    self.resetItemAlternativesWarnings().initTextEditors();
                    data.item.response_type != 3 && self.hideFormContainer();

                }).always(function() {
                    self.form.$el.removeClass('loading');
                });

            } else {
                self.alternativesInputs.render();
                self.codeTestInputs.render();
                self.dragDropInputs.render();
                self.multimediaInputs.render();
                self.dragDropIntoTextInputs.render();
                self.renderInputs('alternative');
                self.modelDatas = opts.modelDatas;
                self.initTextEditors();

            }

        },

        initTextEditors : function () {
            var self = this;
            ['#Item_content','#Item_tip','#Item_detailed_answer'].forEach(function (el) {
                self.initTextEditor($(el));
            });
        },

        renderInputs: function(type) {
            this.$('.item-edit-panel-content').alterClass('item-input-*', 'item-input-' + type);
            type == 'code' && this.codeTestInputs.renderCodeEditor();
        },

        reset: function() {

            this.$('.is-redactor').removeClass('is-redactor').redactor('destroy');
            $('#latex_dialog').dialog('close');
            FormUtils.reset(this.form.$el);
            this.resetItemAlternativesWarnings().showFormContainer();
        },

        validateInfo: function() {
            var itemContent = $('#Item_content');

            if (itemContent.hasClass('is-redactor') && itemContent.redactor('get').length > 0 && $('#Item_title').val().length >= 0) {
                return true;
            }

            showError(this.opts.i18n.invalidItemContent);

            return false;
        },

        validateContent: function() {
            var self = this;

            self.form.$el.addClass('loading');

            return $.post(AppParams.getAppUrl('itemValidation'), self.form.$el.serializeArray()).fail(function(xhr) {
                showError(xhr.responseText);
            }).always(function() {
                self.form.$el.removeClass('loading');
            });
        },

        initTextEditor: function(selector) {
            selector.addClass('is-redactor').redactor(this.opts.redactor).redactor('set',selector.val());
        },
        setPreview:function (value) {

            var texto = value;
            var matches = [];
            //var result = texto.replace(/(\[\[(\w+)\]\])/igm,
            var result = texto.replace(/(\[\[(\d+)\]\])/igm,
              function(m, p1,p2,p3){
                    matches.push({"match":p1,"p":p2});
                    var parent = $("#dragdropIntoTextList").children(":nth-child("+p2+")");
                    var code = $(".into-text-group").eq(p2 - 1).val();
                    var input = $(parent).find("input[class='responseTerm']");
                    var response = $(input).val();
                    if(response === undefined) response = ' --Sin elección definida--';
                    //return '<span style="color:red">'+response+'</span>';
                    return '</div>'+
                        '<div class="into-text-drop color-code-'+code+
                        '" data-group="'+code+'" code_color="color-'+code+
                        '" style="color:red"><ul class="sort2 into-text-drop-ul color-code-'+code+
                        '" data-group="'+code+'" code_color="color-'+code+
                        '" style="color:red">'+response+'</ul></div>'
                        +'<div class="into-text-fragment">';
              });
            $("#sentenceTextAreaPreview").html('<div class="into-text-fragment">'+result+'</div>');
        }
    });
});