//-----------------------IMPORTANT----------------------------
// parameters' specs
// options:
// JSon with structure
// EXAMPLE
// [0] [
        // data_table: 'store_deliveries',
        // title: 'Πεδία'
//      ]
// [1] [
//      checked: "true" --> required
//      class: "js-filter_checkbox checkbox_top" --> required
//      data_column: "dt-order_quantity"
//      value: "Προϊόντα"
//     ]

// --------------------------------------------------------
// container id optional
// when given the drop down menu will be generated inside
// else the default 'filter' value will take place
function generate_drop_down_fields(options, container_id) {
    $('#'+(typeof container_id == 'undefined' ? 'filter' : container_id)).append(generate_drop_down_menu_fields(options));
    generate_drop_down_functionality_fields(options[0].data_table);
    $('.dropdown-toggle').dropdown();
    // Calculate dropdown height.
    var dropdown_height = parseInt($('#' + (typeof container_id == 'undefined' ? 'filter' : container_id) + ' .dropdown-menu').css('height'));

    // Adjust table wrapper height to fit, dropdown menu.
    $('#'+(typeof container_id == 'undefined' ? 'filter' : container_id)).closest('.table-responsive').css('min-height' , `${dropdown_height + 192}px`);
}

//Given the drop down options "draw" the drop down menu FIELDS
function generate_drop_down_menu_fields(options) {
    var result ='<div class="dropdown drop-menu">'+
                    '<button class="btn dropdown-toggle btn-default" type="button" data-toggle="dropdown"> <i class="fa fa-list"></i> <span class="filter-title">'+ options[0].title +
                       '</span><span class="caret"></span></button>'+
                           '<ul class="dropdown-menu">';
    options[1].forEach(option => {
        result += `<li><label class="container_checkbox">
                <input class="` + option.class +
                '" type="checkbox" ' + ( option.checked ? 'data-default="' + option.checked + '"' : '' ) +
                ' data-column= "'+ option.data_column +'"/>'+
                '<span>'+ option.value +'</span></label></li>'
    });
    
    result += ' </ul>'+
            '</div>'+
        '</div>';
    return result;
}
    $(document).on('click', '.container_checkbox', function (e) {
    e.stopPropagation();
   });

//Given the datatable_id(!required) generate the functionality (checked or not) for dropdown
function generate_drop_down_functionality_fields(data_table_id) {
    
    var table = $('#'+data_table_id);
    $(".js-filter_checkbox[data-default='true']").prop("checked", true);
    $(".js-filter_checkbox").each(function () {
        table.DataTable().columns('.' + $(this).attr('data-column')).visible($(this).is(':checked'));
    });
    $(".js-filter_checkbox").change(function () {
        table.DataTable().columns('.' + $(this).attr('data-column')).visible($(this).is(':checked'));
    });
}

//Given the drop down options "draw" the drop down menu FILTERS
function generate_drop_down_menu_filters (options) {
    var result ='<div class="dropdown drop-menu">'+
                    '<button class="btn dropdown-toggle btn-default" type="button" data-toggle="dropdown"> <i class="fa fa-filter"></i> <span class="filter-title">'+ options[0].title +
                        '</span><span class="caret"></span></button>'+
                            '<ul class="dropdown-menu">';
    
    options[1].forEach(option => {
        result += `<li><label class="container_generated_checkbox">
        <input class="` + option.class +
                '" type="checkbox" ' + option.checked + ' ' + ( option.data_column ? 'data-column="' + option.checked + '"/>' : '/>' ) +
                '<span>'+ option.value +'</span></label></li>'
    });
    result += ' </ul>'+
             '</div>'+
            '</div>';
    //activate the dropdown
    $('.dropdown-toggle').dropdown();
    return result;
}

$(document).on('click', '.container_generated_checkbox', function (e) {
    e.stopPropagation();
});

function build_fuctionality(types, table) {
    $('.js-filter_row_checkbox').change(function () {
        var terms = [];
        types.forEach(element => {
            if ($('.js-' + element + '-checkbox').is(':checked')) {
                terms.push(element);
            }
        })
        var search_terms = terms.join('|');
        table.columns('.dt-type').search(search_terms, true, false).draw();
    })
};