// v1.2

var taxonomyHelper = window.taxonomyHelper || {};
// Only for multivalue taxonomyfield
// Takes the value from the dropdown and writes it in the multivalue result field
taxonomyHelper.getTaxValue = function (fieldName) {
    // retrieve value from the relevant hidden input
    var hiddenValue = jQuery("#TAXVALUE_" + fieldName).val();

    if (hiddenValue == "|" || hiddenValue == "" || hiddenValue == undefined) {
        return;
    }

    if ($("#TAXVALUEALL_" + fieldName).val() == "") {
        $("#TAXVALUEALL_" + fieldName).val(hiddenValue).trigger('change');
    } else {
        if ($("#TAXVALUEALL_" + fieldName).val().indexOf(hiddenValue) == -1) {
            $("#TAXVALUEALL_" + fieldName).val($("#TAXVALUEALL_" + fieldName).val() + ";" + hiddenValue).trigger('change');
        }
    }
};

// Only for multivalue taxonomyfield
// Removes a taxonomyvalue with the spezified id from the multivalue result field
taxonomyHelper.removeTaxValue = function (fieldName, id) {
    var newValue = "";
    var taxValueArray = $("#TAXVALUEALL_" + fieldName).val().split(";").filter(Boolean);
    for (var i = 0; i < taxValueArray.length; i++) {
        if (taxValueArray[i].split("|")[1] != id) {
            if (newValue != "") {
                newValue = newValue + ";" + taxValueArray[i];
            }
            else {
                newValue = taxValueArray[i];
            }

        }
    }

    $("#TAXVALUEALL_" + fieldName).val(newValue).trigger('change');
};

taxonomyHelper.openDialog = function (dialogTitel) {
    $('#' + dialogTitel + "_ModalDialog").show();
    $('#' + dialogTitel + "_ModalOverlay").show();
};

taxonomyHelper.closeDialog = function (dialogTitel) {
    $('#' + dialogTitel + "_ModalDialog").hide();
    $('#' + dialogTitel + "_ModalOverlay").hide();
};

jQuery(document).on("change", "select[id^=TERM_]", function () {
    var $dropOption = $(this).find("option:selected");
    $dropOption.parent().nextAll("input:first").val($dropOption.text() + "|" + $dropOption.val()).trigger('change');
});

// Only for multivalue taxonomyfield
// On multivalue taxonomiefield result change
jQuery(document).on("change", "input[id^=TAXVALUEALL_]", function () {
    var that = this;
    var fieldName = $(this).attr("id").replace("TAXVALUEALL_", "");
    var sspId = $(this).attr("data-sspId");
    var termSetId = $(this).attr("data-termSetId");

    var value = $(this).val();
    if (value != "") {
        var context = new SP.ClientContext.get_current();
        var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);

        // Read out TermSet to get the correct path (Reused term)
        var termStore = taxonomySession.get_termStores().getById(sspId);
        var termSet = termStore.getTermSet(termSetId);

        var terms = [];

        // Check if new taxonomyvalue else ignore (prevent double add)
        var valueArr = value.split(";").filter(Boolean);
        valueArr.forEach(function (termItem) {
            var guid = termItem.split("|")[1];
            if ($("#" + guid).length == 0) {
                var term = termSet.getTerm(guid);
                terms.push(term);
                context.load(term);
            }
        });

        // Check if an taxonomyfield was removed
        // If yes remove the corresponding taxonomyfieldvalue
        $(this).siblings("div[id^=SELECTED_" + fieldName + "]").children().each(function () {
            var contains = false;
            var item = $(this);
            valueArr.forEach(function (termItem) {
                var guid = termItem.split("|")[1];
                if (item.attr("id") == guid) {
                    contains = true;
                }
            });

            if (!contains) {
                item.remove();
            }
        })

        // Add missing taxonomyfieldvalues
        context.executeQueryAsync(
            function () {
                for (var i = 0; i < terms.length; i++) {
                    var pathOfTerm = terms[i].get_pathOfTerm().split(";").join(" > ");
                    var termId = terms[i].get_id();
                    $(that).siblings("div[id^=SELECTED_" + fieldName + "]").append('<div id="' + termId + '" class="ss-value" style="display: inline-block; -webkit-box-align: center; padding: 3px 5px; margin: 3px; background-color: lightgray; border-radius: 4px"><span class="ss-value-text">' + pathOfTerm + '</span><span class="ss-value-delete" style="margin: 0 0 0 5px; cursor: pointer;" onClick="window.taxonomyHelper.removeTaxValue(\'' + fieldName + '\', \'' + termId + '\')")">x</span></div>')
                }
            },
            function (x, args) {
                console.log("Call failed. Error: " + args.get_message());
            }
        );
    } else {
        $(this).siblings("div[id^=SELECTED_" + fieldName + "]").empty();
    }
});

var taxonomyValidator = function () {
    taxonomyValidator.prototype.Validate = function (value) {
        var isError = false;
        var errorMessage = ""
        if (value === "|" || value === "" || value == undefined) {
            isError = true;
            errorMessage = "You can't leave this blank.";
        }
        return new SPClientForms.ClientValidation.ValidationResult(isError, errorMessage);
    };
};

var jslinkTemplates = window.jslinkTemplates || {};
jslinkTemplates.Taxonomy = function () {
    var currentlySelectedTerms;
    var internalTermCounter;

    function _editMode(ctx) {
        // register our "get value callback" method
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        formCtx.registerGetValueCallback(formCtx.fieldName, jslinkTemplates.Taxonomy.getValue.bind(null, formCtx.fieldName));

        var validators = new SPClientForms.ClientValidation.ValidatorSet();
        validators.RegisterValidator(new taxonomyValidator());
        var multivalue = ctx.CurrentFieldSchema.AllowMultipleValues;
        formCtx.registerValidationErrorCallback(formCtx.fieldName,
            function (errorResult) {
                if (multivalue == true) {
                    SPFormControl_AppendValidationErrorMessage("TAXVALUEALL_" + formCtx.fieldName, errorResult);
                } else {
                    SPFormControl_AppendValidationErrorMessage("TAX_" + formCtx.fieldName, errorResult);
                }
            }
        );

        formCtx.registerClientValidator(formCtx.fieldName, validators);
        _loadField(multivalue, formCtx.fieldName, ctx.CurrentFieldSchema.SspId, ctx.CurrentFieldSchema.TermSetId, ctx.CurrentFieldValue);

        if (multivalue == true) {
            return "<div id='SELECTED_" + formCtx.fieldName + "' style='display:inline-block; width:90%; border: 1px solid lightgray; min-height: 15px'></div>" +
                "<div onClick='taxonomyHelper.openDialog(\"" + formCtx.fieldName + "\")' style='cursor: pointer; width: 15px; height: 15px; font-weight: bold; margin: 0 5px; line-height: 15px; text-align: center; border-radius: 2px; display:inline-block; border: 1px solid gray; vertical-align: top;'>+</div>" +
                "<div id='" + formCtx.fieldName + "_ModalDialog' style='display:none; position:fixed; z-index: 1505'> " +
                "<div class='ms-dlgContent' style='position:fixed; left: 29%; top: 20%; width: 640px; height: 288px; display: block; z-index: 1505; padding:20px'>" +
                "<div style='margin-bottom:20px'><h2>" + formCtx.fieldName + "</h2></div>" +
                "<select id='TAX_" + formCtx.fieldName + "' style='display:block; width:100%;' termindex='0'><option>Loading...</option></select>" +
                "<input type='hidden' id='TAXVALUE_" + formCtx.fieldName + "' />" +
                "<input class='ms-ButtonHeightWidth' onClick='window.taxonomyHelper.getTaxValue(\"" + formCtx.fieldName + "\");taxonomyHelper.closeDialog(\"" + formCtx.fieldName + "\");return false' type='button' style='position:absolute; bottom:10px; right:10px;' value='Hinzufügen' target='_self'></input>" +
                "<div onClick='taxonomyHelper.closeDialog(\"" + formCtx.fieldName + "\")' style='cursor: pointer; width: 15px; position:absolute; top: 5px; right: 5px; height: 15px; font-weight: bold; margin: 0 5px; line-height: 15px; text-align: center; display:inline-block;'>x</div>" +
                "</div>" +
                "</div>" +
                "<div id='" + formCtx.fieldName + "_ModalOverlay' class='ms-dlgOverlay' style='position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 1504; display:none'></div>" +
                "<input type='hidden' id='TAXVALUEALL_" + formCtx.fieldName + "' data-sspId='" + ctx.CurrentFieldSchema.SspId + "' data-termSetId='" + ctx.CurrentFieldSchema.TermSetId + "' />";
        } else {
            return "<select id='TAX_" + formCtx.fieldName + "' style='display:block; width:100%;' termindex='0'><option>Loading...</option></select>" +
                "<input type='hidden' id='TAXVALUE_" + formCtx.fieldName + "' />";
        }
    };

    function _loadField(multivalue, fieldName, sspId, termSetId, currentValue) {
        //jQuery(document).ready(function () {
        //  jQuery('h3#'+fieldName+' nobr').append("<span id='"+fieldName+"_loading' style='margin-left:8px;display=none;'><img  height='15px' id='TAX_loading' src='/sites/test/Style Library/RAG/Taxonomy/spinner.gif'/></span>");
        //});

        // reset the current terms array
        currentlySelectedTerms = [];

        // wait for the page to render
        jQuery(document).ready(function () {

            var context = new SP.ClientContext.get_current();
            var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);

            var termStore = taxonomySession.get_termStores().getById(sspId);
            var termSet = termStore.getTermSet(termSetId);

            var clonedArray = [];

            if (currentValue && currentValue.length > 0) {
                if (multivalue) {
                    $("#TAXVALUEALL_" + fieldName).val(currentValue).trigger('change');
                    _renderDropDowns(fieldName, sspId, termSetId, clonedArray);
                }
                else {
                    // pull the Id from the current value
                    var currentTermId = currentValue.split("|")[1];
                    var currentTerm = termSet.getTerm(currentTermId);

                    context.load(currentTerm);
                    context.executeQueryAsync(
                        function () {
                            // retrieve the full path .. this will include all of the parent terms too 
                            var fullPath = currentTerm.get_pathOfTerm();

                            // they are semi-colon delimited, so if we perform a split we end up
                            // with an array containing all of the currently selected values
                            currentlySelectedTerms = fullPath.split(";");
                            clonedArray = currentlySelectedTerms.slice();

                            // now we can proceed with rendering...
                            _renderDropDowns(fieldName, sspId, termSetId, clonedArray);
                        },
                        function (x, args) {
                            console.log("Call failed. Error: " + args.get_message());
                        });
                }
            }
            else {
                // there is no current value, so just go
                _renderDropDowns(fieldName, sspId, termSetId, clonedArray);
            }
        });
    };

    function _renderDropDowns(fieldName, sspId, termSetId, clonedArray) {
        //jQuery("#"+fieldName+"_loading").show();
        var elementId = "#TAX_" + fieldName;

        var context = new SP.ClientContext.get_current();
        var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);

        var termStore = taxonomySession.get_termStores().getById(sspId);
        var termSet = termStore.getTermSet(termSetId);

        var terms = termSet.get_terms();
        context.load(terms);
        context.executeQueryAsync(
            function () {
                jQuery(elementId).empty(); // clear out the existing options

                var html = "<option></option>";

                var termEnumerator = terms.getEnumerator();

                // Unterschiedliche html erstellen, um die Sortierung anzupassen
                var termSetHtml = "";
                var termHtml = "";
                var isNewForm = false;
                if (document.location.pathname.substr(document.location.pathname.length - 12).toLowerCase() == 'newform.aspx') { isNewForm = true }
                while (termEnumerator.moveNext()) {
                    var currentHtml = "";
                    var currentTerm = termEnumerator.get_current();
                    // Filter deprecated Terms bei Neuanlage (NewForm.aspx)
                    if (!isNewForm || !currentTerm.get_isDeprecated()) {
                        currentHtml += "<option value='" + currentTerm.get_id() + "'";

                        // if the current option being rendered is in our array
                        // then make sure the option is selected
                        //if (contains(currentlySelectedTerms, currentTerm.get_name())) {
                        if (clonedArray != undefined) {
                            if (currentTerm.get_name() == clonedArray[0]) {
                                currentHtml += " selected='selected'";
                            }
                        }

                        var termName = currentTerm.get_name();
                        if (currentTerm.get_termsCount() > 0) {
                            currentHtml += ">" + "&#x3E; " + termName + "</option>";
                            termSetHtml += currentHtml;
                        }
                        else {
                            currentHtml += ">" + termName + "</option>";
                            termHtml += currentHtml;
                        }
                    }
                }

                html += termSetHtml + termHtml;

                // add the options
                jQuery(elementId).append(html).change(function () {
                    var $dropOption = $(this).find("option:selected");
                    $dropOption.parent().nextAll("input:first").val($dropOption.text() + "|" + $dropOption.val()).trigger('change');
                });
                //jQuery("#"+fieldName+"_loading").hide();

                // check if we selected one of them
                var selectedOption = jQuery(elementId + " option[selected='selected']");
                if (selectedOption.length > 0) {
                    // simulate the same "sender.target" property used in a click event
                    var newSender = {
                        'target': selectedOption[0],
                        'fieldName': fieldName
                    };
                    // recursively render the child drop downs
                    _selectTerm(newSender, clonedArray);
                }

                jQuery(elementId + " option").click(jslinkTemplates.Taxonomy.selectTerm);
                var $dropOption = jQuery(elementId + " option:selected")
                $dropOption.parent().nextAll("input:first").val($dropOption.text() + "|" + $dropOption.val()).trigger('change');
            },
            function (x, args) {
                alert("Call failed. Error: " + args.get_message());
            }
        );
    };

    function contains(a, obj) {
        for (var i = 0; i < a.length; i++) {
            if (a[i] === obj) {
                return true;
            }
        }
        return false;
    }

    function _selectTerm(sender, clonedArray) {
        var termId = jQuery(sender.target).val();
        var termLabel = jQuery(sender.target).text();

        // kill off any existing child-drop-downs (recursively)
        // before we re-render them below
        var selectElement = jQuery(sender.target).parent()[0];
        removeChildDropDowns(selectElement);

        var termIndex = 0;
        var selParent = jQuery(sender.target).parent("[id^=TERM_]");
        if (selParent.length > 0) {
            termIndex = parseInt(selParent.attr("termindex")) + 1;
        }

        if (termId == "") {
            jQuery(sender.target).parent().siblings("input").val("")
            return;
        }

        // update the hidden input field with the currently selected value
        // this should be in the value LABEL|GUID
        //jQuery(sender.target).parent().siblings("input").val(termLabel + "|" + termId);


        var context = new SP.ClientContext.get_current();
        var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);

        var term = taxonomySession.getTerm(termId);
        var childTerms = term.get_terms();

        context.load(term);
        context.load(childTerms);
        context.executeQueryAsync(
            function () {
                // only execute if it has child terms
                if (term.get_termsCount() > 0) {
                    // start off with a select containing a blank option
                    //jQuery("#"+sender.fieldName+"_loading").show();
                    var html = "<select style='display:block; margin-top: 5px; width:100%;' id='TERM_" + termId + "' termindex='" + termIndex + "'>"; //<option></option>
                    var termEnumerator = childTerms.getEnumerator();
                    var termSetHtml = "";
                    var termHtml = "";
                    var isNewForm = false;
                    if (document.location.pathname.substr(document.location.pathname.length - 12).toLowerCase() == 'newform.aspx') { isNewForm = true }
                    while (termEnumerator.moveNext()) {
                        var currentHtml = "";
                        var currentTerm = termEnumerator.get_current();
                        // Filter deprecated Terms bei Neuanlage (NewForm.aspx)
                        if (!isNewForm || !currentTerm.get_isDeprecated()) {
                            currentHtml += "<option value='" + currentTerm.get_id() + "'";

                            // if the current option being rendered is in our array
                            // then make sure the option is selected
                            //if (contains(currentlySelectedTerms, currentTerm.get_name())) {
                            if (clonedArray != undefined) {
                                if (currentTerm.get_name() == clonedArray[termIndex + 1]) {
                                    currentHtml += " selected='selected'";
                                }
                            }

                            var termName = currentTerm.get_name();
                            if (currentTerm.get_termsCount() > 0) {
                                currentHtml += ">" + "&#x3E; " + termName + "</option>";
                                termSetHtml += currentHtml;
                            }
                            else {
                                currentHtml += ">" + termName + "</option>";
                                termHtml += currentHtml;
                            }
                        }
                    }

                    html += termSetHtml + termHtml;

                    // add the new drop-downs
                    jQuery(sender.target).parent().after(html);
                    //jQuery("#"+sender.fieldName+"_loading").hide();


                    // check if we selected one of them when we added them
                    var selectedOption = jQuery('#TERM_' + termId + " option[selected='selected']");
                    if (selectedOption.length == 0 & (clonedArray == undefined || clonedArray.length == 0)) {
                        selectedOption = jQuery('#TERM_' + termId + " option:first").attr('selected', 'selected');
                    }
                    if (selectedOption.length > 0) {
                        // store current selection data
                        selectedOption.parent().nextAll("input:first").val(selectedOption.text() + "|" + selectedOption.val()).trigger('change');
                        // simulate the same "sender.target" property used in a click event
                        var newSender = {
                            'target': selectedOption[0]
                        };
                        // recursively render the child drop downs
                        _selectTerm(newSender, clonedArray);
                    }

                    // and add a click event
                    jQuery("#TERM_" + termId + " option").click(jslinkTemplates.Taxonomy.selectTerm);
                }
                var $newDropOption = jQuery("#TERM_" + termId + " option:selected")
                if ($newDropOption.length == 0) {
                    $newDropOption = jQuery("#TERM_" + termId + " option:first")
                }
                var $input = $newDropOption.parent().nextAll("input:first")
                $input.val($newDropOption.text() + "|" + $newDropOption.val()).trigger('change');
            },
            function (x, args) {
                alert("Call failed. Error: " + args.get_message());
            }
        );
    };

    function removeChildDropDowns(selectElement) {

        // the ~ means "any following siblings" and ignores any siblings
        // further up the chain
        jQuery("#" + selectElement.id + " ~ select").remove();
    };

    function _getValue(fieldName) {
        // retrieve value from the relevant hidden input
        var hiddenValue;
        // if taxvalueall exists it is a multivalue field
        if (jQuery("#TAXVALUEALL_" + fieldName).length == 0) {
            hiddenValue = jQuery("#TAXVALUE_" + fieldName).val();
        } else {
            hiddenValue = jQuery("#TAXVALUEALL_" + fieldName).val();
        }

        // return it
        return hiddenValue;
    };

    return {
        editMode: _editMode,
        selectTerm: _selectTerm,
        getValue: _getValue,
        loadField: _loadField
    }
}();