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

{% block content %}
{% load static %}
{% if exam %}
<div>

    {% if previous > -1 %}
    <a href="{% url 'anatomy:exam_question_detail' exam.id previous %}">Previous question</a>
    {% endif %}
    This question is part of exam: {{exam.name}} [{{pos}}/{{exam_length}}]
    {% if next %}
    <a href="{% url 'anatomy:exam_question_detail' exam.id next %}">Next question</a>
    {% endif %}
</div>
{% endif %}
<button id="save-annotations">Save Annotations</button>
<div id="dicom-image" class="dicom-image" data-url="https://penracourses.org.uk{{ question.image.url}}"
    data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>
<!-- testing -->
<!--<div id="dicom-image" data-url="http://localhost:8000/static/abdoct.jpg"
    data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>-->
<div class="question">
    <a href="{% url 'anatomy:anatomy_question_update' question.id %}" title="Edit the Question">Edit</a>
    <a href="{% url 'anatomy:question_clone' question.id %}" title="Clone the Question">Clone</a>
    <a href="{% url 'anatomy:question_delete' pk=question.pk %}" title="Delete the Question">Delete</a>
    <a href="{% url 'admin:anatomy_anatomyquestion_change' question.id %}"
        title="Edit the Question using the admin interface">Admin Edit</a>
    <div class="date">
        Created: {{ question.created_date }}
    </div>
    <h1>{{ question.GetPrimaryAnswer }}</h1>
    <h2>{{question.question_type}}</h2>
    Answers (score): {% for answer in question.answers.all %}
    {{ answer }} ({{answer.status}}),
    {% endfor %}
    <div>
        Description: {{ question.description }}
    </div>
    <div>
        Exams: {% for exam in question.exams.all %}
        <a href="{% url 'anatomy:exam_overview' pk=exam.pk %}">{{ exam.name }}</a>
        {% endfor %}
    </div>
    <div>
        Modality: {{ question.modality }}
    </div>
    <div>
        Region: {{ question.region }}
    </div>
    <div>
        Structure: {{ question.structure }}
    </div>
    <div>
        Body Part: {{ question.body_part }}
    </div>
    <div>
        Author: {% for user in question.author.all %}
        {{ author }},
        {% endfor %}
    </div>
    <div>
        Open access: {{ question.open_access }}
    </div>
    <div>
        <span id="annotation-json-toggle">Annotation JSON (+/-):</span> <span id="annotation-json-content">
            <pre>{{ question.image_annotations }}</pre>
        </span>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $("#annotation-json-toggle").click(() => { $("#annotation-json-content").toggle() });

        // send request to change the is_private state on customSwitches toggle
        $("#save-annotations").click(function () {
            json = getJsonToolStateNoId();
            $.ajax({
                url: "{% url 'anatomy:question_save_annotation' pk=question.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    annotation: json,
                },
                type: "POST",
                dataType: "json",
            })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);
                    // show some message according to the response. 
                    // For eg. A message box showing that the status has been changed
                    if (data.status == "success") {
                        toastr.info('Annotations saved')
                    } else {
                        toastr.warning('Error saving annotations')
                    }
                })
                .always(function () {
                    console.log('[Done]');
                })
        })
    });


    function getJsonToolStateNoId() {
        const el = document.getElementById("dicom-image");

        const c = cornerstone.getEnabledElement(el);

        const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;

        const image_id = c.image.imageId;

        const state_with_id = toolStateManager.saveToolState()

        const json_tool_state = JSON.stringify(state_with_id[image_id]);

        return json_tool_state;

    }


</script>
{% endblock %}