{% extends "anatomy/base.html" %}

{% load static %}
{% load crispy_forms_tags %}
{% load help_tags %}

{% block title %}
    Anatomy
{% endblock %}


{% 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).append('<option value=' + newID + ` title=${newRepr} >` + newRepr + '</option>').removeAttr("selected").val(newID)
            win.close();
        }

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


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


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

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

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

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

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

            // Get all input elements
                input = document.getElementById("id_image");
            //fileInput = document.getElementById("id_images-0-image");

                f = evt.dataTransfer.files[0]

                let dT = new DataTransfer();
                dT.clearData();
                dT.items.add(f);

                input.files = dT.files;

                ocr(input);

            // 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;

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


            $('#add_more').click(() => { add_input_form() });

            function updateFileList() {
                $("#drop-filenames").empty()
                $("#id_image").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);
            });

        //document.getElementById("id_question_type").selectedIndex = 1;
            answer_1_status = document.getElementById("id_answers-0-status").selectedIndex;
            if (answer_1_status == 0) {
                document.getElementById("id_answers-0-status").selectedIndex = 3;
            }

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

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

    </script>

    {{ form.media }}
{% endblock %}
{% block content %}

    {% if object %}
        {% include 'anatomy/question_link_header.html' %}
    {% endif %}

    <h2>{{object|yesno:"Update,Create"}} Question</h2>
    {% help "Help" %}
        <p>This form can be used to create an Anatomy question. Once created, the question can be edited or deleted as needed.</p>

        <p>Question type can be selected from a predefined list. If you require a more please contact ross.kruger@nhs.net.</p>

        <p>Answers can be defined once the question has been created (and labelled).</p>

        <p>Not all fields are required.</p>

        <p>Correct and incorrect answers can be defined once the question has been created.</p>

        <p>Images can be selected either directly via the browse button or by dragging and dropping them into the designated area below.</p>

        <p>Supported formats include JPEG, PNG, and GIF. It is also possible to use DICOM images.</p>
    {% endhelp %}
    <form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
        {% csrf_token %}
        <a href="/anatomy/examination/create" id="add_examination" class="add-popup"
           onclick="return showAddPopup(this);"><img src="{% static 'img/icon-addlink.svg' %}"></a>
        <a href="/anatomy/body_part/create" id="add_body_part" class="add-popup"
           onclick="return showAddPopup(this);"><img src="{% static 'img/icon-addlink.svg' %}"></a>

        {% crispy form %}
        <div id="drop-container" class="drop-target">Drop image here
            <div id="drop-filenames"></div>
        </div>
    </form>
{% endblock %}