{% extends "longs/base.html" %}
{% load static from static %}

{% block js %}
<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->

<script type="text/javascript">
    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) {
        console.log(id)
        $(id + "_to").append('<option value=' + newID + ' title=' + newRepr + ' >' + newRepr + '</option>')
        win.close();
    }

    document.addEventListener('drop', function (e) { e.preventDefault(); }, false);

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

    function add_answers_input_form() {
        var form_idx = $('#id_answers-TOTAL_FORMS').val();
        $('#answer_form_set').append($('#answer_empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_answers-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    }


    $(document).ready(function () {
        $("#add_examination").appendTo($("label[for='id_examination']"));

        dropContainer = document.getElementById("drop-container");

        dropContainer.ondragover = function (evt) {
            evt.preventDefault();
            evt.stopPropagation();
        };

        dropContainer.ondragenter = function (evt) {
            console.log("ENTER")
            console.log(evt)
            $(evt.target).addClass("drop-target-active")
            evt.preventDefault();
            evt.stopPropagation();
        };

        dropContainer.ondragleave = function (evt) {
            console.log("ENTER")
            console.log(evt)
            $(evt.target).removeClass("drop-target-active")
            evt.preventDefault();
            evt.stopPropagation();
        };

        dropContainer.ondrop = function (evt) {
            $(evt.target).removeClass("drop-target-active");

            // Get all input elements
            inputs = $("#long-form input[type=file][id^=id_images-]");
            //fileInput = document.getElementById("id_images-0-image");

            // Make sure we have enough input targets
            input_diff = (evt.dataTransfer.files.length - 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 = $("#long-form input[type=file][id^=id_images-]");
            }

            // Loop through each dropped file and try to assign to an
            // input element
            [...evt.dataTransfer.files].forEach((f) => {
                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)

                        return false
                    }
                }
            })

            // // If you want to use some of the dropped files
            // const dT = new DataTransfer();
            // dT.items.add(evt.dataTransfer.files[0]);
            // dT.items.add(evt.dataTransfer.files[3]);
            // fileInput.files = dT.files;

            loadDicomViewer();

            evt.preventDefault();
            evt.stopPropagation();
        };


        $('#add_more_images').click(() => { add_input_form() });
        $('#add_more_answers').click(() => { add_answers_input_form() });


        $("input[type=file]").on('change', function () {
            $(this).removeClass("image-ident-warning");
            $(this).removeClass("image-ident-ok");
            console.log("input change1");
            console.log("input change", this);
            //ocr(this);
            //LoadDicomViewer();

        });



    });




    function ocr(input) {
        // Tesseract.recognize(f, "eng",{ logger: m => console.log(m) }
        // ).then(({ data: { text } }) => {
        //   console.log(text);
        //   l = text.toLowerCase();
        //   if (l.includes("accesion") || l.includes("number") || l.search(/(REF|RK9|RH8|RA9)\d+/g)) {
        //       console.log("SHIT", this);
        //   }
        // })

        console.log('{% static "worker.min.js" %}');
        console.log('{{ STATIC_URL }}/tesseract-core.wasm.js %}');

        const worker = Tesseract.createWorker({
            workerPath: '{% static "worker.min.js" %}',
            langPath: '{% static "" %}',
            //langPath: '{{ STATIC_URL }}',
            corePath: '{% static "tesseract-core.wasm.js" %}',
        });

        const url = URL.createObjectURL(input.files[0]);
        let img = new Image;
        img.src = url;

        img.onload = function () {


            width = img.width;

            // const rectangle = { left: 0, top: 0, width: width, height: 10 }


            (async () => {
                await worker.load();
                await worker.loadLanguage('eng');
                await worker.initialize('eng');
                // const { data: { text } } = await worker.recognize(input.files[0], { rectangle });
                const { data: { text } } = await worker.recognize(input.files[0]);
                //console.log(text);
                l = text.toLowerCase();
                $(`img[data-input-id='${input.id}'`).removeClass("image-ident-loading");
                console.log(l);
                if (l.includes("accesion") || l.includes("number") || l.search(/(ref|rk9|rh8|ra9|rbz)\d+/g) > -1) {
                    console.log("SHIT", input);
                    $(input).addClass("image-ident-warning");
                    $(`img[data-input-id='${input.id}'`).addClass("image-ident-warning");
                } else {
                    $(input).addClass("image-ident-ok");

                }

                await worker.terminate();
            })();
        }
    }


    async function loadDicomViewer(callback) {
        //images = []
        //Function that returns a promise to read the file
        const reader = (file) => {
            return new Promise((resolve, reject) => {
                const fileReader = new FileReader();
                fileReader.onload = () => resolve(fileReader);
                fileReader.readAsDataURL(file);
            });
        }

        const readFile = (file) => {
            reader(file).then(reader => {
                var image = new Image();
                image.height = 100;
                image.title = file.name;
                image.src = reader.result;
                $("#images").append(image);
                //images.push(reader.result);
                loadViewer(images);
            });
        }



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


        file_set.each(async (n, el) => {
            console.log(el);
            if (el.files.length > 0) {
                filename = el.files[0].name;
                await readFile(el.files[0]);
            }
        })


        console.log("images from files", images);


    }

    function loadViewer(images) {
        //dicomViewer.loadCornerstone($("#single-dicom-viewer"), null, images, annotations);
        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 = $("#images img");
        if (n == image_set.length) {
            const event = new CustomEvent('loadDicomViewer', { "detail": images });

            window.dispatchEvent(event);
            updateImagePositions();
        }

    }

    function updateImagePositions() {

        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);
            console.log(file_element);
            if (file_element.files.length > 0) {
                n++;
                $(ul).find("input[type=number]").val(n);
            }
        }

    }
</script>

{{ form.media }}
{% endblock %}
{% block content %}
<h2>Add Series</h2>
<!-- <a href="{% url 'longs:long_create_defaults' %}">Edit defaults</a> -->
This form will create a image set that can be associated with a long question. If the question has already been created it can be linked below.
<form action="" method="post" enctype="multipart/form-data" id="long-form">
    {% csrf_token %}
    <a href="/generic/examination/create" id="add_examination" class="add-popup"
        onclick="return showAddPopup(this);"><img src="{% static '/img/icon-addlink.svg' %}"></a>
    <table>
        {{ form.as_table }}
    </table>

    <h3>Images:</h3>
    <input type="button" value="Add More Images" id="add_more_images">
    <div id="drop-container" class="">Drop images here (or use the buttons below)
        <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
        <div id="drop-filenames"></div>
    </div>
    <div id="image_form_set">
        {% for form in image_formset %}
        <ul class="no-error image-formset">
            {{form.non_field_errors}}
            {{form.errors}}
            {{ form.as_ul }}
        </ul>
        {% endfor %}
    </div>
    {{ image_formset.management_form }}
    <input type="submit" class="submit-button" value="Submit" name="submit">
</form>
<div id="empty_form" style="display:none">
    <ul class='no_error image-formset'>
        {{ image_formset.empty_form.as_ul }}
    </ul>
</div>
<div id="images">

</div>
{% endblock %}