let btn_select_field_all_fab = $('#btn_select_all_fab'),
    btn_select_field_single_fab = $('#btn_select_one_fab'),
    btn_unselect_field_all_fab = $('#btn_unselect_all_fab'),
    btn_unselect_field_single_fab = $('#btn_unselect_one_fab'),
    select_fields_available_fab = $('#export_fab_available_fields_fab'),
    select_fields_selected_fab = $('#export_fab_selected_fields_fab')
    btn_submit_modal_export_fab = $('#modalExportFabFile_submit'),
    selected_ids = []
    ;

function btnManagementFab(){
    let available_options_fab = $('#export_fab_available_fields_fab option'),
        selected_options_fab = $('#export_fab_selected_fields_fab option'),
        available_length_selected_fab = $('#export_fab_available_fields_fab option:selected').length,
        selected_length_selected_fab = $('#export_fab_selected_fields_fab option:selected').length
    ;

    if(0 < available_options_fab.length){
        $(btn_select_field_all_fab).removeClass('disabled');
    }
    else {
                $(btn_select_field_all_fab).removeClass('disabled');
        $(btn_select_field_all_fab).addClass('enabled');
    }
    if(0 < selected_options_fab.length){
        $(btn_unselect_field_all_fab).removeClass('disabled');
        $(btn_submit_modal_export_fab).removeClass('disabled');
    }
    else {
        $(btn_unselect_field_all_fab).addClass('disabled');
        $(btn_submit_modal_export_fab).addClass('disabled');
    }

    if(0 < available_length_selected_fab){
        $(btn_select_field_single_fab).removeClass('disabled');
    }
    else {
        $(btn_select_field_single_fab).addClass('disabled');
    }
    if(0 < selected_length_selected_fab){
        $(btn_unselect_field_single_fab).removeClass('disabled');
    }
    else {
        $(btn_unselect_field_single_fab).addClass('disabled');
    }
    $(available_options_fab).unbind('click');
    $(available_options_fab).bind('click',function() {
        btnManagementFab();
    });
    $(selected_options_fab).unbind('click');
    $(selected_options_fab).bind('click',function() {
        btnManagementFab();
    });
    $(btn_submit_modal_export_fab).unbind('click');
    let has_clicked = false
    $(btn_submit_modal_export_fab).bind('click', function () {
        if(!has_clicked){
            has_clicked = true;
            let btn_initial_state = $(this).html();
            let data = {
                'fields':[],
                'selection_only': $('#export_selection_only_fab').is(':checked'),
                'selected_ids' : selected_ids,
                'separator': $('#export_separator_fab').val(),
                'charset': $('#export_charset_fab').val(),
                'file_format': $('#export_file_format_fab').val(),
                'token' : "{{ csrf_token('app_export') }}",
                'code_export' : 'export_kb_fab'
            }
            let selected_fields = $('#export_fab_selected_fields_fab option');
            $(selected_fields).each(function(){
                let value = $(this).val();
                data.fields.push(value);
            });
            $(btn_submit_modal_export_fab).html(btn_spin);
            $.ajax({
                url: "{{ url('app_export') }}",
                data: data,
                method: 'POST',
                xhr:function(){
                    var xhr = new XMLHttpRequest();
                    xhr.responseType = 'blob'
                    return xhr;
                },
                success: function (response,status, headers) {
                    const regex = /filename=(.*?)$/g
                    let content_disposition = headers.getResponseHeader('Content-Disposition');
                    let search = regex.exec(content_disposition);
                    const url = window.URL.createObjectURL(response);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = (search.length >= 1) ? search[1] : 'export.xlsx';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);

                    $(btn_submit_modal_export_fab).html(btn_initial_state);
                    $('#modalExportFabFile').foundation('close');
                    has_clicked = false;
                }
            });
        }

    });

}

btnManagementFab();

$(btn_select_field_all_fab).click(function(){
    let btn = this;
    if(!$(btn).hasClass('disabled')){
        let available_options_fab = $('#export_fab_available_fields_fab option');
        $(available_options_fab).each(function(){
            selectOptionFab(this);
        });
        btnManagementFab();
    }
});

$(btn_select_field_single_fab).click(function(){
    let btn = this;
    if(!$(btn).hasClass('disabled')){
        let available_fields = $('#export_fab_available_fields_fab option:selected');
        $(available_fields).each(function(){
            selectOptionFab(this);
        });
        btnManagementFab();
    }
});

$(btn_unselect_field_all_fab).click(function(){
    let btn = this;
    if(!$(btn).hasClass('disabled')){
        let selected_fields = $('#export_fab_selected_fields_fab option');
        $(selected_fields).each(function(){
            unselectOptionFab(this);
        });
        btnManagementFab();
    }
});

$(btn_unselect_field_single_fab).click(function(){
    let btn = this;
    if(!$(btn).hasClass('disabled')){
        let selected_fields = $('#export_fab_selected_fields_fab option:selected');
        $(selected_fields).each(function(){
            unselectOptionFab(this);
        });
        btnManagementFab();
    }
});

function selectOptionFab(option){
    $(option).detach().appendTo(select_fields_selected_fab);
}

function unselectOptionFab(option){
    $(option).detach().appendTo(select_fields_available_fab);
}