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

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

    <script type="text/javascript">
        let csrf_token = "{{csrf_token}}";
        let hash_url = "{% url 'shorts:question_by_hash' %}";
    //let monitor_directory_handler = false;
    //let monitor_interval_id = false;

    // set to hold the files that are still being processed
        let load_viewer = false;

//    async function listAllFilesAndDirs(dirHandle, files_only) {
//        const files = [];
//        for await (let [name, handle] of dirHandle) {
//            const {
//                kind
//            } = handle;
//            if (handle.kind === 'directory') {
//                if (files_only != true) {
//                    files.push({
//                        name,
//                        handle,
//                        kind
//                    });
//                }
//                files.push(...await listAllFilesAndDirs(handle));
//            } else {
//                files.push({
//                    name,
//                    handle,
//                    kind
//                });
//            }
//        }
//        return files;
//    }


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




        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_examination").appendTo($("#examination-label"));

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

                file_drop_number = evt.dataTransfer.files.length;

                if (file_drop_number < 1) {
                    toastr.warning(`Drop failed (no files), try again.`);
                } else {
                    toastr.info(`Loading ${file_drop_number} dropped image(s).`);
                }

            // Get all input elements
                inputs = extendInputs("rapid-form", file_drop_number);

                console.log("drop inputs", inputs, evt);


            // Loop through each dropped file and try to assign to an
            // input element
                [...evt.dataTransfer.files].forEach((f) => {
                    feedback = false;
                    if (evt.target.id == "feedback-drop-target") {
                        feedback = true;
                    }
                    addFile(f, feedback)
                })

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


//        $('#directory-picker-button').click(() => {
//            window.showDirectoryPicker().then((handler) => {
//                monitor_directory_handler = handler;
//                monitor_interval_id = setInterval(function () {
//                    listAllFilesAndDirs(monitor_directory_handler).then(async function (
//                        items) {
//                        files_to_add = new Set();
//                        current_files = getCurrentFormFiles();
//                        current_files_tuple = new Set()
//                        for (let elem of current_files) {
//                            current_files_tuple.add(
//                                `${elem.size}, ${elem.name}, ${elem.lastModified}`
//                            );
//                        }
//
//                        console.log(current_files_tuple)
//                        for (var i = 0; i < items.length; i++) {
//
//                            f = await items[i].handle.getFile()
//                            console.log("f", f)
//                            if (!current_files_tuple.has(
//                                `${f.size}, ${f.name}, ${f.lastModified}`
//                            )) {
//                                files_to_add.add(f);
//                            }
//                        }
//
//                        // file objects differ enough that the following does not work
//                        //let distinct_set = new Set([...files_to_add].filter(
//                        //    x => !current_files.has(x)));
//
//
//                        extendInputs(files_to_add.size);
//                        files_to_add.forEach((file) => {
//                            addFile(file, false);
//                        });
//                    });
//                }, 5000);
//                $("#directory-picker-display").text(monitor_directory_handler.name)
//                    .after(
//                        $(
//                            " <span>[clear]</span>").click((evt) => {
//                                $(evt.target).remove();
//                                $("#directory-picker-display").text("");
//                                monitor_directory_handler = false;
//                                clearInterval(monitor_interval_id);
//                                //const files = await listAllFilesAndDirs(directoryHandle);
//                            }));
//            });
//        });



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

            $("input[type=file]").on('change', input_change);

            $("#rapid-form").on("submit", (evt) => {
                submit = true;
                if (!$normal) {
                    if ($('#id_answers-TOTAL_FORMS').val() == "0") {
                        submit = false;
                        add_answers_input_form();
                        toastr.error(`Question that are not normal require an answer`);
                        evt.preventDefault();
                    }

                }


                if (!$("#id_examination_to option").length) {
                    submit = false;
                    toastr.error("Please add examination type")
                    evt.preventDefault();
                }

                if (submit) {
                    toastr.info(`Submiting question... please wait`, '', {
                        "closeButton": false,
                        "debug": false,
                        "newestOnTop": false,
                        "progressBar": true,
                        "positionClass": "toast-top-full-width",
                        "preventDuplicates": false,
                        "onclick": null,
                        "showDuration": "300",
                        "hideDuration": "1000",
                        "timeOut": "5000",
                        "extendedTimeOut": "1000",
                        "showEasing": "swing",
                        "hideEasing": "linear",
                        "showMethod": "fadeIn",
                        "hideMethod": "fadeOut"
                    });
                }
            })




        });




        function extractDicomDetails(byteArray) {
            if (!$("#id_examination_to option").length) {

        // We need to setup a try/catch block because parseDicom will throw an exception
        // if you attempt to parse a non dicom part 10 file (or one that is corrupted)
                try {
            // parse byteArray into a DataSet object using the parseDicom library
                    var dataSet = dicomParser.parseDicom(byteArray);

            // dataSet contains the parsed elements.  Each element is available via a property
            // in the dataSet.elements object.  The property name is based on the elements group
            // and element in the following format: xggggeeee where gggg is the group number
            // and eeee is the element number with lowercase hex characters.

            // To access the data for an element, we need to know its type and its tag.
            // We will get the sopInstanceUid from the file which is a string and
            // has the tag (0020,000D)
                    var study_description = dataSet.string('x00081030').toLowerCase();
                    console.log("STUDY", study_description);

            // try to match with a study description (if not already selected)
                    if ($(`#id_examination_to option`).length < 1) {
                        option = $(`#id_examination_from option[title*='${study_description}' i]`);

                        if (option.length) {
                            option.appendTo($("#id_examination_to"));
                            toastr.success(`Examination set to ${option.attr('title')} from dicom data`);
                        } else {
                            toastr.warning(
                                `Unable to set examination ${study_description} from dicom data (it needs creating)`);

                        }
                    }

                } catch (err) {
                    console.log(err);
                }
            }
        }
    </script>

    {{ form.media }}
{% endblock %}

{% block content %}

    {% if object %}
        {% include "shorts/question_link_header.html" %}
    {% endif %}

    <h2>Submit Shorts Question</h2>
    <h3>Instructions</h3>
    <p>
        Use this form to create a new short style question/case. Multiple images can be added to a question.
        If the feedback image box is checked they will not be displayed when taking the question.
    </p>
    <p>Once you have created the question with this form you can add relevant findings.
    </p>
<!-- <div>
    To monitor a directory select it here.<br />
    <button id="directory-picker-button">Pick a directory</button>
    <span id="directory-picker-display">No directory monitored</span>
</div> -->
    <form action="" method="post" enctype="multipart/form-data" id="rapid-form">
    {% comment %} {% csrf_token %} {% endcomment %}
        <a href="/rapids/examination/create" id="add_examination" class="add-popup"
           onclick="return showAddPopup(this);"><img src="{% static 'img/icon-addlink.svg' %}"></a>

        {% crispy form form.helper %}

        <h3>Images:</h3>
        <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>
        <input type="button" value="Add More Images" id="add_more_images">
        <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="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='' style="display:none"></div>

{% endblock %}


{% block css %}
    <style>
        .add-popup {
            float: left;
        }
    </style>
{% endblock css %}