{% extends "rapids/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-${form_idx}-status`).val(2);
        $('#id_answers-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    }


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

        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) {
            console.log("SHIT", evt);
            $(evt.target).removeClass("drop-target-active");

            // Get all input elements
            inputs = $("#rapid-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)
            console.log("diff", input_diff)

            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 = $("#rapid-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)

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

                            $(`[name=${feedback_el_name}]`).prop("checked", true);
                        }
                        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();
            updateFileList();
        };


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

        function updateFileList() {
            $("#drop-filenames").empty()
            $("#image_form_set input[type=file]").each((n, el) => {
                console.log(el);
                if(el.files.length > 0) {
                    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"
                    }
                    $("#drop-filenames").append(
                        `<span>${n}: ${el.files[0].name}</span><img class='uploading${extra_class}' data-input-id='${el.id}' src=${URL.createObjectURL(el.files[0])}>`
                    )
                }
            })

        }

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



        function ifNormal(){
        if (document.getElementById("id_normal").checked){
            $("#answer_form_set textarea").attr("required", false)
        } else {
            $("#answer_form_set textarea").attr("required", true)
        }
        }

        $("#id_normal").change(() => ifNormal());

        ifNormal();




    });
    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) {
        $("#single-dicom-viewer").empty()
        //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, el) => {
            reader(file).then(reader => {
                var image = new Image();
                image.height = 100;
                image.title = file.name;
                image.src = reader.result;
                image.className = "temp-thumb";
                console.log("read" ,el);
                $(el).parent().parent().prepend(image);
                //images.push(reader.result);
                loadViewer();
            });
        }



        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], el);
            }
        })




    }

    function loadViewer() {
        //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 = $("#image_form_set img");
        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();
        }

    }

    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);
            }

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

    }

</script>

{{ form.media }}
{% endblock %}
{% block content %}
<h2>Submit Rapid</h2>
<a href="{% url 'rapids:rapid_create_defaults' %}">Edit defaults</a>
<form action="" method="post" enctype="multipart/form-data" id="rapid-form">
    {% csrf_token %}
    <a href="/rapids/abnormality/create" id="add_abnormality" class="add-popup"
        onclick="return showAddPopup(this);"><img src="{% static '/img/icon-addlink.svg' %}"></a>
    <a href="/rapids/examination/create" id="add_examination" class="add-popup"
        onclick="return showAddPopup(this);"><img src="{% static '/img/icon-addlink.svg' %}"></a>
    <a href="/rapids/region/create" id="add_region" class="add-popup" onclick="return showAddPopup(this);"><img
            src="{% static '/img/icon-addlink.svg' %}"></a>

    <table>
        {{ form.as_table }}
    </table>
    <h3>Answers:</h3>
    <input type="button" value="Add More Answers" id="add_more_answers">
    <div id="answer_form_set">
        {% for form in answer_formset %}
        <ul class="no-error answer-formset">
            {{form.non_field_errors}}
            {{form.errors}}
            {{ form.as_ul }}
        </ul>
        {% endfor %}
    </div>
    {{ answer_formset.management_form }}
    <h3>Images:</h3>
    <input type="button" value="Add More Images" id="add_more_images">
    <div id="drop-container" class="drop-target">Drop images here (or use the buttons below)<div
            id="feedback-drop-target">Feedback image?<br />drop those here</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">
    <input type="submit" class="submit-button" value="Submit and Clone" name="submit-clone">
</form>
<div id="empty_form" style="display:none">
    <ul class='no_error image-formset'>
        {{ image_formset.empty_form.as_ul }}
    </ul>
</div>
<div id="answer_empty_form" style="display:none">
    <ul class='no_error answer-formset'>
        {{ answer_formset.empty_form.as_ul }}
    </ul>
</div>

<div id="single-dicom-viewer" class="rapid-dicom-viewer" data-images="" data-annotations=''></div>

{% endblock %}