/*global $:false */
/*global _:false */
/*global define:false */
define([
    "backbone",
    "form2js",
    "utils",
    "bootstrapFileInput",
    "text!../../templates/addEditCategoryTemplate.html",
    "text!../../templates/addProperty.html",
    "text!../../templates/approvalTemplate.html",
    "text!../../templates/editCategoryTemplateFormContent.html",
    "text!../../templates/unavailableAlertTemplate.html",
    "text!../../templates/optionSelectionTemplate.html",
    "text!../../templates/itemSpecificInput.html",
    "text!../../templates/categoryModalFooter.html",
    "text!../../templates/addEditCategoryForm.html",
    "text!../../templates/addPropertyButtonAndResetMaster.html",
    ], function (Backbone, form2js, Utils, bootstrapFileInput, addEditCategoryTemplate,
        addProperty, approvalTemplate, editCategoryTemplateFormContent, unavailableAlertTemplate,
        optionSelectionTemplate, itemSpecificInput, categoryModalFooter, addEditCategoryForm,
        addPropertyButtonAndResetMaster) {

        "use strict";

        var AddCategoryView = Backbone.View.extend({
            el: "#main-container",
            templates: _.template(addProperty),
            addEditCategoryTmpl: _.template(addEditCategoryTemplate),
            unavailableAlertTemplate: _.template(unavailableAlertTemplate),
            needsApproval: _.template(approvalTemplate),
            editCatTempForm: _.template(editCategoryTemplateFormContent),
            modalFooter: _.template(categoryModalFooter),
            addEditForm: _.template(addEditCategoryForm),
            addPropButton: _.template(addPropertyButtonAndResetMaster),
            optionSelectionTemplate: _.template(optionSelectionTemplate),

            clicks: 0,
            currentPage: 1,
            emptyModalCategory: {
                modalTitle: "Add a new",
                modalFooter: "Save",
                modalId: "add",
                method: "post",
                id: "",
                name: "",
                needs_approval: false,
                authenticity_token: "",
                hide: false,
            },

        initialize: function(scoping) {
            var self = this,
            type = "add",
            reset = false;

            if (scoping) {
                this.scoping = scoping.scoping;
            }

            this.$el.find(".add-category-modal").remove();

            this.$el.append(this.addEditCategoryTmpl(this.emptyModalCategory));

            $(".add-category-modal").modal("show");

            $(".add-category-modal .modal-content")
                .append(this.editCatTempForm(this.emptyModalCategory));
            $(".add-form").append(self.addEditForm(self.emptyModalCategory));

             //Styling for input type file
            $("#add-image-inputs").bootstrapFileInput();
            $("#add-approval").append(this.needsApproval());

            $(".add-category-modal").find(".add-nested-fields-container")
            .append(self.addPropButton({
                modalId: self.emptyModalCategory.modalId,
                reset: reset
            }));

            $(".add-category-modal .modal-footer")
            .append(this.modalFooter(self.emptyModalCategory));

            this.imageChanged("add");

            //Adding dynamic field
            $("#add-category-form")
            /*.bootstrapValidator({
                feedbackIcons: {
                    valid: "glyphicon glyphicon-ok",
                    invalid: "glyphicon glyphicon-remove",
                    validating: "glyphicon glyphicon-refresh"
                },
                fields: {
                    name: {
                        validators: {
                            notEmpty: {
                                message: "Name is required field",
                            }
                        }
                    }
                }

            })*/
            .off("click", ".add_add_nested_fields")
            .off("click", ".remove_nested_fields_add")
            .off("click", ".reset-master-property")
            .on("click", ".reset-master-property", function() {

                $("#add-category-form")
                .find(".master-radio")
                .prop("checked", false);
            })
            .on("click", ".add_add_nested_fields", function() {

                var properties = $("#add-category-form").find(".property"),
                    emptyInputs =false;
                if (properties.length === 0) {
                        self.clicks++;
                        $(".add-property-category").append(self.templates({
                            modalId: self.emptyModalCategory.modalId,
                            clicks: self.clicks
                        }));
                        properties = 0;
                } else if (properties.length > 0) {
                    var prevProperty = $(properties[properties.length-1]),
                        name = prevProperty.find(".property_name").val(),
                        properties_type = prevProperty.find(".property_type").val(),
                        select_value = prevProperty.find(".select").val();

                        if(properties_type === "select") {
                            if( name === "" || properties_type === "" ||
                                select_value === "") {
                                emptyInputs = true;
                            } else {
                                emptyInputs = false;
                            }
                        } else {
                             if( name === "" || properties_type === "") {
                                emptyInputs = true;
                            } else {
                                emptyInputs = false;
                            }
                        }

                    if (emptyInputs !== true) {
                        self.clicks++;

                        $(".add-property-category").append(self.templates({
                            modalId: self.emptyModalCategory.modalId,
                            clicks: self.clicks
                        }));
                    } else {
                        var message = "You must complete the required fields " +
                            "before adding a new property.";
                        Utils.addNoty("error", message);
                    }
                    properties = 0;
                }
                $("#add-category-form").bootstrapValidator("destroy", true);

                $("#add-category-form")
                    .bootstrapValidator({
                    feedbackIcons: {
                        valid: "glyphicon glyphicon-ok",
                        invalid: "glyphicon glyphicon-remove",
                        validating: "glyphicon glyphicon-refresh"
                    },
                    fields: {
                        name: {
                            validators: {
                                notEmpty: {
                                    message: "Name is required field",
                                }
                            }
                        },
                        properties_name:{
                        selector:".property_name",
                            validators: {
                                notEmpty: {
                                message: "Property name is required field",
                                }
                            }
                        },
                        properties_type:{
                            selector:".property_type",
                            validators: {
                                notEmpty: {
                                message: "Property type is required field"
                                }
                            }
                        },
                        select_values:{
                            selector: ".select",
                            validators: {
                                notEmpty: {
                                message: "Select values is required field"
                                }
                            }
                        },
                    }

                }).on("success.form.bv", function() {
                    self.createCategory();
                    return false;
                });
                self.radioListener("add");

                self.propertiesType(type);

                var $template = $(".property"),

                $optionName = $template.find(".property_name"),
                $optionType = $template.find(".property_type"),
                $optionSelect = $template.find(".select");

                var categoryForm = $("#add-category-form");
                categoryForm
                    .data("bootstrapValidator")
                    .addField($optionName)
                    .addField($optionType)
                    .addField($optionSelect);

            })
            .on("click", ".remove_nested_fields_add", function() {

                if ($(".add-category-modal .property").length === 1) {

                    $("#add-category-form").find(".add-nested-fields-container").html("");
                    $("#add-category-form").find(".add-nested-fields-container").append(self.addPropButton({
                        modalId:self.emptyModalCategory.modalId,
                        reset: false
                    }));
                }

                self.propertiesType(type);

                var $row = $(this).closest("div"),
                    $optionName = $row.find(".property_name"),
                    $optionType = $row.find(".property_type"),
                    $optionSelect = $row.find(".select");

                $row.remove();
                $("#add-category-form")
                    .data("bootstrapValidator")
                    .removeField($optionName)
                    .removeField($optionType)
                    .removeField($optionSelect);
            });
           /* .on("success.form.bv", function() {
                self.createCategory();
                return false;
            });*/
        },

        updateCategories: function(data, self) {
            Utils.saveCategoriesCallback(data, self);
        },

        addNotificationSuccess: function(message) {
            Utils.addNoty("success", message);
        },

        createCategory: function() {

            console.log("post");
            var data = form2js("add-category-form", ".", true,
                function(node) {
                    if (node.id && node.id.match(/callbackTest/)) {
                        return { name: node.id, value: node.innerHTML };
                    }

                }),
                url = "/Categories",
                self = this,
                formObj = $("#add-category-form"),
                select_values = $("#add-category-form").find(".select");

            $.each(select_values, function(ind) {
                data.properties_attributes[ind].select_values =
                    select_values[ind].value.split(", ");
            });
            Utils.dismissModal(false);
            Utils.doPost(url, data, function(resp) {
                Utils.getAllCategoriesCall(self.updateCategories, self);

                Utils.getAllCategoriesCall(function(data) {
                    Utils.saveCategoriesCallback(data);
                    self.setNewCategories(resp);
                }, Utils);

                Utils.uploadImage(formObj, url, resp.id, function() {
                    Backbone.pubSub.trigger("addCategory");
                    self.addNotificationSuccess(Utils.error.success.categoryCreate);
                });

                $(".add-category-modal").modal("hide");
            }, function(jqXHR) {
                    var message = jqXHR.responseJSON.error;
                    Utils.addNoty("error", message);
            });
        },

        imageChanged: function(action) {

            //Preview for add/edit category.
            $("#" + action + "-image-inputs").change(function() {
                var file = document.getElementById(action + "-image-inputs")
                        .files[0],
                readImg = new FileReader();
                readImg.readAsDataURL(file);
                readImg.onload = function(e) {
                    $(".img-"+ action + "-category").attr("src",e.target.result)
                    .fadeIn();
                };

            });
        },

        radioListener: function(modal) {

            var $radioInputs,
                self = this;
            //If the method is call from the add modal.
            if (modal == "add") {
                //Find the master radio buttons - add modal
                $radioInputs = $(".add-property-category").find(".master-radio");
            }

            $radioInputs.on("change", function() {

                $radioInputs.not($(this)).removeAttr("checked");

                if ($(this).val()) {

                    $("." + modal + "-category-modal")
                    .find(".add-nested-fields-container").html("");
                    $("." + modal + "-category-modal")
                    .find(".add-nested-fields-container")
                    .append(self.addPropButton({
                        modalId: modal,
                        reset: true
                    }));
                }
                $.each($radioInputs, function() {
                    var $this = $(this),
                    $hiddenSibling = $this.siblings(".master-radio-hidden");

                    if($this.is(":checked")) {

                        $hiddenSibling.attr("disabled", "disabled");
                    } else {
                        $hiddenSibling.removeAttr("disabled");
                    }
                });
            });
        },

        propertiesType: function(actionType) {
            $(".property_type")
            .on("change", function() {
                var input = $(this).parents(".property").find(".select"),
                    form,
                    id,
                    idAdd;

                if( actionType == "add") {
                    form = $("#add-category-form");
                }

                if ($(this).val() === "text") {
                    /*if (typeof form.data("bootstrapValidator") == "undefined") {
                        Utils.validator(form,  function() {

                        }, Utils.error.add.categoryName);

                    }*/
                    var invalid=$("#add-category-form").data("bootstrapValidator")
                                .validate().$invalidFields;
                    $("#save-category").removeAttr("disabled");

                    console.log(invalid.length);

                    form.data("bootstrapValidator")
                        .updateStatus("select_values","NOT_VALIDATED");
                    input.siblings().hide();
                    input.attr("disabled", "disabled");
                    form.data("bootstrapValidator").removeField(input);
                    input.val("");

                } else {
                    console.log("select");

                    var invalid = $("#add-category-form").data("bootstrapValidator")
                                .validate().$invalidFields;

                    console.log(invalid.length);

                    /*if (typeof form.data("bootstrapValidator") == "undefined") {
                        Utils.validator(form,  function() {

                        }, Utils.error.add.categoryName);
                    }*/
                    input.attr("name", "select_values");
                    form.data("bootstrapValidator").addField(input);
                    form.data("bootstrapValidator").validateField("select_values");
                    input.removeAttr("disabled");
                }
            });
        },

        setNewCategories: function(resp) {
            var self = this,
                $dropdown = $("." + this.scoping + "-category");


            this.categories = Utils.getLocalData("categories");
            Utils.subStringFunction(self, self.categories, "name", 25);

            $dropdown.html(self.optionSelectionTemplate({
                data: self.categories,
                selectedType: "Select a category"
            }));

            $dropdown.find("option[value=" + resp.id + "]").prop("selected", true);
            $dropdown.trigger("change");
        }
    });
    return AddCategoryView;
});