let active_file_inputs = new Set();

    function add_input_form() {
        var form_idx = $('#id_images-TOTAL_FORMS').val();
        $('#image_form_set').append($($('#empty_form').html().replace(/__prefix__/g, form_idx)).on("change",
            input_change));
        $('#id_images-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    }

    async function blobToBase64(blob) {
        return new Promise((resolve, _) => {
            const reader = new FileReader();
            reader.onloadend = () => resolve(reader.result);
            reader.readAsDataURL(blob);
        });
    }

    function extendInputs(form_id, n) {
        // Makes sure we have n inputs available
        // returns available inputs
        inputs = getUnusedInputs($(`#${form_id} input[type=file][id^=id_images-]`));
        //fileInput = document.getElementById("id_images-0-image");


        // Make sure we have enough input targets
        input_diff = (n - inputs.length)

        if (input_diff > 0) {
            for (let j = 0; j < input_diff; j++) {
                add_input_form()
            }

            // Need to make sure we include the new ones...
            inputs = getUnusedInputs($(`#${form_id} input[type=file][id^=id_images-]`));
        }
        return inputs;
    }

    function getCurrentFormFiles(form_id) {
        inputs = $(`#${form_id} input[type=file]`);

        let files = new Set();
        for (let j = 0; j < inputs.length; j++) {
            i = inputs.get(j);
            if (i.files.length > 0) {
                files.add(i.files[0]);
            }
        }
        return files;
    }

    function getUnusedInputs(inputs) {
        new_inputs = [];
        for (let i = 0; i < inputs.length; i++) {
            input = inputs.get(i);

            if (!input.value) {
                new_inputs.push(input);
            }

        }

        return $(new_inputs);

    }


    function addFile(f, feedback) {
        let dT = new DataTransfer();
        dT.clearData();
        dT.items.add(f);
        for (let i = 0; i < inputs.length; i++) {
            el = inputs.get(i);

            if (el.files.length == 0) {
                el.files = dT.files;
                //ocr(el)

                if (feedback) {
                    arr = el.name.split("-");
                    arr.splice(2, 1, "feedback_image");
                    feedback_el_name = arr.join("-");

                    $(`[name=${feedback_el_name}]`).prop("checked", true);
                }

                $(el).change();
                return false;
            }
        }

    }


    function ocr2(url, input) {
        console.log("OCR", input)
        Tesseract.recognize(
            url,
            'eng',
            //{ logger: m => console.log(m) }
        ).then(({
            data: {
                text
            }
        }) => {
            l = text.toLowerCase();
            uploading_el = $(`img[data-input-id='${input.id}'], div[data-input-id='${input.id}']`)
            uploading_el.removeClass("image-ident-loading");
            console.log("found text", l);
            if (l.includes("accesion") || l.includes("number") || l.search(
                    /(ref|rk9|rh8|ra9|rbz)\d+/g) > -1) {
                console.log("Match found ", input);
                $(input).addClass("image-ident-warning");
                uploading_el.addClass("image-ident-warning");
            } else {
                $(input).addClass("image-ident-ok");

            }
        })

    }

    function input_change(evt) {
        file = evt.target.files[0];
        $(evt.target).removeClass("image-ident-warning");
        $(evt.target).removeClass("image-ident-ok");

        el = evt.target;

        readFileAndProcess2(el);

    }

    function showEditPopup(url) {
        var win = window.open(url, "Edit",
            'height=500,width=800,resizable=yes,scrollbars=yes');
        return false;
    }

    function showAddPopup(triggeringLink) {
        var name = triggeringLink.id.replace(/^add_/, '');
        href = triggeringLink.href;
        var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
        win.focus();
        return false;
    }

    function closePopup(win, newID, newRepr, id) {
        $(id + "_to").append('<option value=' + newID + ' title=' + newRepr + ' >' + newRepr + '</option>')
        win.close();
    }


    async function readFileAndProcess2(el) {

        //file_set = $("#image_form_set input[type=file]");

        //file_set.each(async (n, el) => {

        if (el.files.length > 0) {
            filename = el.files[0].name;
            // Probably no need to await here anymore
            //await readFile(el.files[0], el);




            $(el).parent().parent().find(".temp-thumb").remove();

            let url = URL.createObjectURL(el.files[0])

            n = el.id.split("-")[1];
            $(`#drop-filenames span[data-input-id='${el.id}']`).remove();

            let extra_class = " image-ident-loading";
            if ($(el).hasClass("image-ident-warning")) {
                extra_class = " image-ident-warning";
            } else if ($(el).hasClass("image-ident-ok")) {
                extra_class = " image-ident-ok";
            }

            //let extra_class = "";
            let imageId;
            if (el.files[0].type.startsWith("image")) {

                let hash = CryptoJS.MD5(el.files[0]).toString();

                base = await blobToBase64(el.files[0]);
                imageId = "base64://" + base.split(",")[1];
                imageId2 = base;
                const element = $(`<img class='temp-thumb' src=${imageId}></div>`).get(0)
                $(el).parent().parent().prepend(element);


                ocr2(url, el);
                checkHash(hash, el);

                if ($("#drop-filenames").length > 0) {
                $("#drop-filenames").append(
                    `<span data-input-id='${el.id}'><span>${n}: ${el.files[0].name}</span><img class='uploading${extra_class}' data-input-id='${el.id}' src=${url}></span>`
                )
                }
            } else {
                imageId = `wadouri:${url}`;
                imageId2 = imageId

                const element = $(`<div class='temp-thumb' src=${imageId2}></div>`).get(0)
                $(el).parent().parent().prepend(element);
                cornerstone.enable(element);
                cornerstone.loadAndCacheImage(imageId).then(function (image) {
                    cornerstone.displayImage(element, image);
                    cornerstone.resize(element)


                    if (hash_url) {
                        let pixel_data = image.getPixelData().toString()

                        let hash = CryptoJS.MD5(pixel_data).toString();
                        checkHash(hash, el);
                    }


                    console.log("image", image)

                    extractDicomDetails(image.data.byteArray)

                });

                if ($("#drop-filenames").length > 0) {
                    $("#drop-filenames").append(
                        `<span data-input-id='${el.id}'><span>${n}: ${el.files[0].name}</span><div class='uploading${extra_class}' data-input-id='${el.id}' src=${url}></div></span>`
                    )

                    const element2 = $(`#drop-filenames div[data-input-id='${el.id}']`).get(0);
                    cornerstone.enable(element2);
                    cornerstone.loadAndCacheImage(imageId).then(function (image) {
                        cornerstone.displayImage(element2, image);

                        $(element2).addClass("temp-thumb-large");
                        cornerstone.resize(element2)
                        setTimeout(function () {
                            ocr2($(element2).find("canvas").get(0).toDataURL(), el);
                            $(element2).removeClass("temp-thumb-large");
                            cornerstone.resize(element2)
                        }, 500);
                    });
                }

            }





            active_file_inputs.delete(el)
            console.log("active", active_file_inputs)
            // Only load once all queued files have been processed
            if (active_file_inputs.size < 1) {
                //load_viewer = true;
                loadViewer();
            }
        }
        //})
    }

    function checkHash(hash, input, url) {
        $.ajax({
                url: hash_url,
                data: {
                    csrfmiddlewaretoken: csrf_token,
                    hash: hash
                },
                type: "POST",
                dataType: "json",
            })
            // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
            .done(function (data) {
                console.log(data);

                if (data.status == "success") {
                    console.log("success");
                    console.log(data.id)
                    if (data.id) {
                        //toastr.info(`id ${data.id}`)
                        uploading_el = $(`img[data-input-id='${input.id}'], div[data-input-id='${input.id}']`)
                        $(input).addClass("image-duplicate");
                        uploading_el.addClass("image-duplicate");

                        toastr.warning(`Image (${input.files[0].name}) already exists.<br /><a href='${data.url}'>Click to view</a><br /><button type="button" class="btn clear">Dismiss</button>`, "Duplicate image", {
                            "closeButton": false,
                            "debug": false,
                            "newestOnTop": false,
                            "progressBar": false,
                            "positionClass": "toast-top-full-width",
                            "preventDuplicates": false,
                            "onclick": null,
                            "showDuration": "0",
                            "hideDuration": "0",
                            "timeOut": 0,
                            "extendedTimeOut": 0,
                            "showEasing": "swing",
                            "hideEasing": "linear",
                            "showMethod": "fadeIn",
                            "hideMethod": "fadeOut",
                            "tapToDismiss": false
                        })

                    }
                }
            })
            .always(function () {
                console.log('[Done]');
            })
    }


    function updateImagePositions() {
        console.log("UP pos");

        file_set = $("#image_form_set ul");

        n = 0;
        for (let i = 0; i < file_set.length; i++) {
            ul = file_set.get(i);
            console.log(ul)

            file_element = $(ul).find("input[type=file]").get(0);

            // If a (new) file is being uploaded we save it's name prior to it being hashed
            if (file_element.files.length > 0) {
                file_name = file_element.files[0].name
                //$(ul).find("input[type=text]").val(file_name);
                $(ul).find("input[name*='filename']").val(file_name);
            }

            if (file_element.files.length > 0 || $(ul).find(":contains('Currently:')")) {
                n++;
                $(ul).find("input[type=number]").val(n);
            }
        }

    }


    function loadViewer() {
        console.log("LOAD VIEWER")
        // temp fix before starting viewer collapsed
        $("#single-dicom-viewer").show()
        //file_set = $("#image_form_set input[type=file]");

        //n = 0;
        //for (let i = 0; i < file_set.length; i++) {
        //    el = file_set.get(i)
        //    if (el.files.length > 0) {
        //        n++;
        //    }
        //}

        image_set = $("#image_form_set .temp-thumb").get() //.map(function() { return $(this).attr("src")}).get();
        console.log(image_set);
        //console.log()
        //if (n == image_set.length) {
        const event = new CustomEvent('loadDicomViewer', {
            "detail": image_set
        });

        window.dispatchEvent(event);
        sortable('.sortable');
        //sortable('.sortable')[0].addEventListener('sortstop', function(e) {
        updateImagePositions();
        //}

    }