/**************************************************************************************

 * Project     : Chest X-Ray Pathology Detection and Localization using Deep Learning

 * Author Name : Rammuni Ravidu Suien Silva

 * UoW No      : 16267097

 * IIT No      : 2016134

 * Module      : Final Year Project 20/21

 * Supervisor  : Mr Pumudu Fernando

 * Prototype    : Web Interface - FrontEnd

 * File         : Server AJAX requests functions

 * University of Westminster, UK || IIT Sri Lanka

 **************************************************************************************/

// Image upload front-end

// Initialization of page

jQuery(function () {

    $('.image-section').hide();

    $('.loader').hide();

    detResults.hide();

    // Uploaded CXR Preview

    function readURL(input) {

        if (input.files && input.files[0]) {

            $('.img-preview').each(function (i, row_el) {

                if (i >= input.files.length || !input.files[i].type.match('image.*')) {

                    return false;

                }

                let reader = new FileReader();

                let cxrPreviewId = "#cxr-preview-" + i;

                $(this).css('display', 'inline-block');

                reader.onload = function (e) {

                    $(cxrPreviewId).css('background-image', 'url(' + e.target.result + ')');

                    $(cxrPreviewId).hide();

                    $(cxrPreviewId).fadeIn(650);

                }

                reader.readAsDataURL(input.files[i]);

            });

        }

    }

    // Image upload button events and animations

    $("#imageUpload").on("change", function () {

        if ($('#imageUpload').get(0).files.length !== 0) {

            $('.image-section').show();

            $('.cxr-preview').css('background-image', '');

            $('#btn-detect').show();

            $('.img-preview').hide();

            $('#modelSelect').prop('disabled', false)

            $('#loader_localized').hide();

            $('#btn-save').hide();

            $('#btn-localize').hide();

            $('.det-row').off("click")

            $(".cxr-loc-img").attr('src', "");

            detResults.text('');

            detResults.hide();

            localized = false;

            readURL(this);

        }

    });

    // Detection results request

    $('#btn-detect').on("click", function () {

        $('#imageUpload').prop("disabled", true);

        let form_data = new FormData();

        // Read selected files

        let totalFiles = document.getElementById('imageUpload').files.length;

        for (let index = 0; index < totalFiles; index++) {

            form_data.append("file_" + index, document.getElementById('imageUpload').files[index]);

        }

        // Model request link

        let model_id = $("#modelSelect").val()

        let urlLink = '/predict/' + model_id

        $('#modelSelect').prop('disabled', true)

        // Show loading animation

        $(this).hide();

        $('#loader_ani').show();

        // Requesting the detection results by calling api /predict (ajax POST call)

        $.ajax({

            type: 'POST',

            url: urlLink,

            data: form_data,

            dataType: 'json',

            contentType: false,

            cache: false,

            processData: false,

            async: true,

            success: function (data) {

                // Displaying detection results

                $('#loader_ani').hide();

                $('#btn-save').show();

                detResults.fadeIn(600);

                // Call for the creation of the detection results table

                $(cxrResultsDisplayTable(data)).appendTo('#result');

                console.log('Detection DONE!');

                $('#btn-localize').show();

                $('#imageUpload').prop("disabled", false);

            },

            error: function () {

                $('#loader_ani').hide();

                alert("Couldn't Scan CXR Image");

            },

        });

        $.ajax({

            type: 'GET',

            url: '/get_symptoms',

            dataType: 'json',

            contentType: false,

            cache: false,

            processData: false,

            async: true,

            success: function (data) {

                symptoms_json = data

            },

            error: function () {

                alert("Couldn't Load Symptoms");

            },

        });

    });

    // Localization function

    $('#btn-localize').on("click", function () {

        setLoaderIcon();

        $('#imageUpload').prop("disabled", true);

        // Show loading animation

        $(this).hide();

        $('#loader_ani_localize').show();

        $('#btn-save').prop("disabled", true);

        // Initiating the localization

        $.ajax({

            url: '/localize',

            dataType: 'text',

            contentType: false,

            cache: false,

            processData: false,

            async: true,

            success: function (data) {

                $('#imageUpload').prop("disabled", false);

                // Displaying detection results

                localized = true

                // Setting initial localized images

                $('.det-row').each(function (i, row_el) {

                    let pathology_id = i;

                    let cxr_popup_img_id = ".cxrPopupImg-" + pathology_id;

                    srcAdd(pathology_id, cxr_popup_img_id);

                })

                $('#loader_ani_localize').hide();

                detResults.fadeIn(600);

                localizationPathAdd(data);

                $('#loader_localized').show();

                $('#btn-save').prop("disabled", false);

                console.log('Path adding DONE!');

            },

            error: function () {

                $('#loader_ani_localize').hide();

                alert("Couldn't Localize CXR");

            },

        });

    });

    $('#btn-save').on("click", function () {

        printResults();

    });

});