function jsonToForm(json, helper, info) {
    console.log("jsonToForm json", json);
    console.log("jsonToForm helper", helper);
    console.log("jsonToForm info", info);
    $('#jsonElements').empty();
    if (typeof helper["avideoPluginDescription"] === "object") {
        labelText = helper["avideoPluginDescription"].name;
        labelDescription = helper["avideoPluginDescription"].description;
        div = $('<div />', { "class": 'alert alert-info' });
        strong = $('<strong />', { "html": labelText + "<hr>" });
        p = $('<p />', { "html": labelDescription });
        div.append(div);
        div.append(strong);
        div.append(p);
        $('#jsonElements').append(div);
    }
    $.each(json, function (i, val) {
        var div;
        var label;
        var input;

        var labelText = i;
        var labelDescription = '';
        if (typeof helper[i] === "object") {
            labelText = helper[i].name;
            labelDescription = helper[i].description;
            if (validURL(labelDescription)) {
                labelDescription = "<a data-toggle='tooltip' title=\"Click here for help\" href='" + labelDescription + "' target='_blank'><i class='fas fa-info-circle'></i></a>";
            } else if (labelDescription) {
                labelDescription = "<span data-toggle='tooltip' title=\"" + labelDescription + "\"><i class='fas fa-info-circle'></i></span>";
            }
            labelText += " " + labelDescription;
        }


        if (i.startsWith("avideoPluginHTML_") && typeof (val) === "string") {
            div = $(val);
        } else {
            if (typeof (val) === "object") {// checkbox
                div = $('<div />', { "class": 'form-group' });
                label = $('<label />', { "html": labelText + ": " });
                if (val.type === 'textarea') {
                    input = $('<textarea />', { "class": 'form-control jsonElement', "name": i, "pluginType": "object" });

                    input.text(val.value);
                } else if (typeof val.type === 'object') {
                    input = $('<select />', { "class": 'form-control jsonElement', "name": i, "pluginType": "select" });

                    $.each(val.type, function (index, value) {
                        var select = "";
                        if (val.value == index) {
                            select = "selected";
                        }
                        $(input).append('<option value="' + index + '" ' + select + '>' + value + '</option>');
                    });

                } else {
                    input = $('<input />', { "class": 'form-control jsonElement', "type": val.type, "name": i, "value": val.value, "pluginType": "object" });
                }
                div.append(label);
                div.append(input);
            } else if (typeof (val) === "boolean") {// checkbox
                div = $('<div />', { "class": 'form-group' });
                label = $('<label />', { "class": "checkbox-inline" });
                input = $('<input />', { "class": 'jsonElement', "type": 'checkbox', "name": i, "value": 1, "checked": val });
                label.append(input);
                label.append(" " + labelText);
                div.append(label);
            } else {
                div = $('<div />', { "class": 'form-group' });
                label = $('<label />', { "html": labelText + ": " });
                input = $('<input />', { "class": 'form-control jsonElement', "name": i, "type": 'text', "value": val });
                div.append(label);
                div.append(input);
            }
        }
        
        if (isPluginParameterDeprecated(i, info)) {
            $(div).addClass('is_deprecated');
            if (!i.startsWith("avideoPluginHTML_")) {
                $(div).addClass('bg-danger');
            }
            //$(div).addClass('text-danger');
        }
        if (isPluginParameterExperimental(i, info)) {
            $(div).addClass('is_experimental');
            if (!i.startsWith("avideoPluginHTML_")) {
                $(div).addClass('bg-warning');
            }
            //$(div).addClass('text-warning');
        }
        if (isPluginParameterAdvanced(i, info)) {
            $(div).addClass('is_advanced');
            if (!i.startsWith("avideoPluginHTML_")) {
                $(div).addClass('bg-info');
            }
            //$(div).addClass('text-info');
        }

        $('#jsonElements').append(div);
        $('.jsonElement').on('change', function () {
            var json = formToJson();
            json = JSON.stringify(json);
            $('#inputData').val(json);
        });
        

        $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true });
    })
    countPluginParametersType();
}

function formToJson() {
    var json = {};
    $(".jsonElement").each(function (index) {
        var name = $(this).attr("name");
        var type = $(this).attr("type");
        var pluginType = $(this).attr("pluginType");
        if (pluginType === 'object') {
            if (typeof type === 'undefined') {
                type = 'textarea';
            }
            json[name] = { type: type, value: $(this).val() };
        } else if (pluginType === 'select') {
            console.log(type);
            type = {};
            $(this).find("option").each(function (i) {
                type[$(this).val()] = $(this).text();
            });
            console.log(type);
            json[name] = { type: type, value: $(this).val() };
        } else if (type === 'checkbox') {
            json[name] = $(this).is(":checked");
        } else {
            json[name] = $(this).val();
        }
    });
    //console.log(json);
    return json;
}

function isPluginParameterDeprecated(parameter_name, info) {
    if (typeof info[parameter_name] === 'undefined' || empty(info[parameter_name])) {
        return false;
    }
    return info[parameter_name].is_deprecated;
}

function isPluginParameterExperimental(parameter_name, info) {
    if (typeof info[parameter_name] === 'undefined' || empty(info[parameter_name])) {
        return false;
    }
    return info[parameter_name].is_experimental;
}

function isPluginParameterAdvanced(parameter_name, info) {
    if (typeof info[parameter_name] === 'undefined' || empty(info[parameter_name])) {
        return false;
    }
    return info[parameter_name].is_advanced;
}

function countPluginParametersType() {
    var types = ['is_advanced', 'is_deprecated', 'is_experimental',];
    var total = types.length;
    for (var i = 0; i < total; i++) {
        var type = types[i];
        var totalFromType = $('.' + type).length;
        var label = $('#' + type).parent();
        if (totalFromType) {
            $(label).show();
            $(label).find('.badge').text(totalFromType);
        } else {
            $(label).hide();
            $(label).find('.badge').text(0);
        }
    }


}