let btn_select_field_all_fs = $('#btn_select_all_fs'),
    btn_select_field_single_fs = $('#btn_select_one_fs'),
    btn_unselect_field_all_fs = $('#btn_unselect_all_fs'),
    btn_unselect_field_single_fs = $('#btn_unselect_one_fs'),
    select_fields_available_fs = $('#export_fs_available_fields_fs'),
    select_fields_selected_fs = $('#export_fs_selected_fields_fs')
    btn_submit_modal_export_fs = $('#modalExportFSFile_submit'),
    selected_ids = []
    ;

function btnManagementFS(){
    let available_options_fs = $('#export_fs_available_fields_fs option'),
        selected_options_fs = $('#export_fs_selected_fields_fs option'),
        available_length_selected_fs = $('#export_fs_available_fields_fs option:selected').length,
        selected_length_selected_fs = $('#export_fs_selected_fields_fs option:selected').length
    ;

    if(0 < available_options_fs.length){
        $(btn_select_field_all_fs).removeClass('disabled');
    }
    else {
                $(btn_select_field_all_fs).removeClass('disabled');
        $(btn_select_field_all_fs).addClass('enabled');
    }
    if(0 < selected_options_fs.length){
        $(btn_unselect_field_all_fs).removeClass('disabled');
        $(btn_submit_modal_export_fs).removeClass('disabled');
    }
    else {
        $(btn_unselect_field_all_fs).addClass('disabled');
        $(btn_submit_modal_export_fs).addClass('disabled');
    }

    if(0 < available_length_selected_fs){
        $(btn_select_field_single_fs).removeClass('disabled');
    }
    else {
        $(btn_select_field_single_fs).addClass('disabled');
    }
    if(0 < selected_length_selected_fs){
        $(btn_unselect_field_single_fs).removeClass('disabled');
    }
    else {
        $(btn_unselect_field_single_fs).addClass('disabled');
    }
    $(available_options_fs).unbind('click');
    $(available_options_fs).bind('click',function() {
        btnManagementFS();
    });
    $(selected_options_fs).unbind('click');
    $(selected_options_fs).bind('click',function() {
        btnManagementFS();
    });
    $(btn_submit_modal_export_fs).unbind('click');
    let has_clicked = false
    $(btn_submit_modal_export_fs).bind('click', function () {
        if(!has_clicked){
            has_clicked = true;
            let btn_initial_state = $(this).html();
            let data = {
                'fields':[],
                'selection_only': $('#export_selection_only_fs').is(':checked'),
                'selected_ids' : selected_ids,
                'separator': $('#export_separator_fs').val(),
                'charset': $('#export_charset_fs').val(),
                'file_format': $('#export_file_format_fs').val(),
                'token' : "{{ csrf_token('app_export') }}",
                'code_export' : 'export_kb_fs'
            }
            let selected_fields = $('#export_fs_selected_fields_fs option');
            $(selected_fields).each(function(){
                let value = $(this).val();
                data.fields.push(value);
            });
            $(btn_submit_modal_export_fs).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_fs).html(btn_initial_state);
                    $('#modalExportFSFile').foundation('close');
                    has_clicked = false;
                }
            });
        }

    });

}

btnManagementFS();

$(btn_select_field_all_fs).click(function(){
    let btn = this;
    if(!$(btn).hasClass('disabled')){
        let available_options_fs = $('#export_fs_available_fields_fs option');
        $(available_options_fs).each(function(){
            selectOptionFS(this);
        });
        btnManagementFS();
    }
});

$(btn_select_field_single_fs).click(function(){
    let btn = this;
    if(!$(btn).hasClass('disabled')){
        let available_fields = $('#export_fs_available_fields_fs option:selected');
        $(available_fields).each(function(){
            selectOptionFS(this);
        });
        btnManagementFS();
    }
});

$(btn_unselect_field_all_fs).click(function(){
    let btn = this;
    if(!$(btn).hasClass('disabled')){
        let selected_fields = $('#export_fs_selected_fields_fs option');
        $(selected_fields).each(function(){
            unselectOptionFS(this);
        });
        btnManagementFS();
    }
});

$(btn_unselect_field_single_fs).click(function(){
    let btn = this;
    if(!$(btn).hasClass('disabled')){
        let selected_fields = $('#export_fs_selected_fields_fs option:selected');
        $(selected_fields).each(function(){
            unselectOptionFS(this);
        });
        btnManagementFS();
    }
});

function selectOptionFS(option){
    $(option).detach().appendTo(select_fields_selected_fs);
}

function unselectOptionFS(option){
    $(option).detach().appendTo(select_fields_available_fs);
}