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

{% load static %}

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

    <script type="text/javascript">
    let csrf_token = "{{csrf_token}}";
    let hash_url = false;
        document.addEventListener('drop', function (e) { e.preventDefault(); }, false);

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

                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("atlas-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();
            };
            //dropContainer.ondrop = function (evt) {
            //    $(evt.target).removeClass("drop-target-active");


            //    if (evt.dataTransfer.files.length < 1) {
            //        toastr.warning(`Drop failed :( try again?`);
            //    } else {
            //        toastr.info(`Adding ${evt.dataTransfer.files.length} files.`);
            //    }

            //    // Get all input elements
            //    inputs = $("#atlas-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 = $("#atlas-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;

            //    loadDicomViewerAndFileImages();

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


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

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



            sortable('.sortable');
            sortable('.sortable')[0].addEventListener('sortupdate', function (e) {
                /*

            This event is triggered when the user stops sorting and the DOM position has not yet changed.

            e.detail.item - {HTMLElement} dragged element

            Origin Container Data
            e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
            e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
            e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
            */
                //updateImagePositions();

                $(".temp-thumb").remove()
                loadDicomViewer();
            });
        });



        async function loadDicomViewerAndFileImages(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 => {
                    console.log("hello", file, el, image)
                    //if ($("#id_examination").find(":selected")[0].dataset.select2Id == "2") {
                    //    var byteArray = new Uint8Array(reader.result);
                    //    console.log("etrxact", reader)
                    //    extractDicomStudyDescription(byteArray);
                    //}
                    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(images);

                });
            }

            const dicomReader = (file) => {
                return new Promise((resolve, reject) => {
                    const fileReader = new FileReader();
                    fileReader.onload = () => resolve(fileReader);
                    fileReader.readAsArrayBuffer(file);
                });
            }

            const readDicomFile = (file, el) => {
                dicomReader(file).then(reader => {
                    if ($("#id_examination").find(":selected")[0].dataset.select2Id == "2") {
                        var byteArray = new Uint8Array(reader.result);
                        console.log("etrxact", reader)
                        extractDicomDetails(byteArray);
                    }
                });
            }



            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);
                    readDicomFile(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 = $("#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 extractDicomDetails(byteArray) {
            // 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 {
                console.log("bytearray", byteArray)
                // parse byteArray into a DataSet object using the parseDicom library
                var dataSet = dicomParser.parseDicom(byteArray);
                console.log("ds", dataSet)

                // 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');
                var accession_number = dataSet.string('x00080050').toLowerCase();
                var patient_id = dataSet.string('x00100020').toLowerCase();
                var modality = dataSet.string('x00080060');
                var projection = dataSet.string('x00185101');
                var plane = dataSet.string('x00180022').toLowerCase();
                console.log("STUDY", study_description);
                console.log("acc", accession_number);
                console.log("pid", patient_id);
                console.log("projection", projection);
                console.log("plane", plane);

                function select_plane(option) {
                    let plane_select_object = document.getElementsByName("plane")[0]
                    const $options = Array.from(plane_select_object.options);
                    const optionToSelect = $options.find(item => item.text === option);
                    optionToSelect.selected = true;

                }

                if (plane.includes("axial")) {
                    select_plane("axial");
                } else if (plane.includes("sagittal")) {
                    select_plane("sagittal");
                } else if (plane.includes("coronal")) {
                    select_plane("coronal");
                } else if (plane.includes("ap")) {
                    select_plane("AP");
                } else if (plane.includes("lat") | plane.includes("lateral")) {
                    select_plane("lateral");
                } else if (plane.includes("pa")) {
                    select_plane("PA");

                }


                modality_map = {
                    "DX": "Radiograph",
                    "CR": "Radiograph",
                    "CT": "CT",
                    "MR": "MR",
                    "RF": "Fluroscopy",
                    "US": "Ultrasound",
                }

                if (modality in modality_map) {
                    let modality_select_object = document.getElementsByName("modality")[0]
                    const $options = Array.from(modality_select_object.options);
                    const optionToSelect = $options.find(item => item.text === modality_map[modality]);
                    optionToSelect.selected = true;



                } else {
                    toastr.info(`Unable to automatically set modality: ${modality}`)
                }

                to_replace = ["lt", "rt", "contrast", "LT", "RT", "Contrast"]

                for (let i = 0; i < to_replace.length; i++) {

                    study_description = study_description.replace(to_replace[i], "");
                }

                let select_object = document.getElementsByName("examination")[0]
                
                if (select_object.value == "") {
                    $.get(`${select_object.dataset.autocompleteLightUrl}?q=${study_description}`, (data) => {
                        console.log(data)
                        if (data.results.length==1){

                            $(select_object).select2("trigger","select", {
                                data: data.results[0]
                            })
                            
                        }
                    }) 

                }

                not_anon = false;

                site_codes = ["ref", "rk9", "ra9", "rh8", "rbz", "rba"]

                for (let i = 0; i < site_codes.length; i++) {
                    if (
                    accession_number.startsWith(site_codes[i])
                    || patient_id.startsWith(site_codes[i])) {
                        not_anon = true;
                    }
                }

                if (not_anon) {
                toastr.warning(`File does not appear to be annonymised<br/>Accession: ${accession_number} <br/>Patient ID: ${patient_id}<br/>`, 'Anonymisation warning', {
                            "closeButton": false,
                            "debug": false,
                            "newestOnTop": false,
                            "progressBar": false,
                            "positionClass": "toast-top-full-width",
                            "preventDuplicates": false,
                            "onclick": null,
                            "showDuration": "0",
                            "hideDuration": "0",
                            "timeOut": 0,
                            "extendedTimeOut": 0,
                            "showEasing": "swing",
                            "hideEasing": "linear",
                            "showMethod": "fadeIn",
                            "hideMethod": "fadeOut",
                });
            }

                // TODO: fix
                //$.ajax({
                //    url: `{% url 'generic:examination-autocomplete' %}/${encodeURI(study_description)}`,
                //    //context: document.body,
                //    success: function(data){
                //        console.log(data)
                //    }
                //});

                //// 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 %}
    <h2>Add Series</h2>
    This form will create a image set that can be associated with a atlas question. If the question has already been created
    it can be linked below.
    <form action="" method="post" enctype="multipart/form-data" id="atlas-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>
        <div id="drop-container" class="series-drop">Drop images here (or use the buttons below). Dropping images here will overwrite
            existing images in the series. When drag and dropping make sure to drag the first image or the order will not be
            maintained. Note: dicom images are often not exported in order (although their order can be automatically
            detected once uploaded)
            <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
            {% comment %} <div id="drop-filenames"></div> {% endcomment %}
        </div>
        <div id="image_form_set" class="sortable">
            {% 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 %}