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

{% load 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_answers-TOTAL_FORMS').val();
        $('#form_set').append($('#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']"));
        $("#add_body_part").appendTo($("label[for='id_body_part']"));
        $("#add_structure").appendTo($("label[for='id_structure']"));


        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 %}
<h2>Submit Question</h2>
<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>
    <a href="/anatomy/structure/create" id="add_structure" class="add-popup" onclick="return showAddPopup(this);"><img
            src="{% static '/img/icon-addlink.svg' %}"></a>

    <table>
        {{ form.as_table }}
    </table>
    <div id="drop-container" class="drop-target">Drop image here
        <div id="drop-filenames"></div>
    </div>
    <h3>Answers:</h3>
    <input type="button" value="Add More Answers" id="add_more">
    <div id="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 }}
    <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 answer-formset'>
        {{ answer_formset.empty_form.as_ul }}
    </ul>
</div>
{% endblock %}