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

{% block content %}
{% load static %}
<!-- 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="floating-header">
    <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="#"
        onclick="return window.create_popup_window('{% url 'feedback_create' question_type='anatomy' pk=question.pk %}')">
        Add Note</a>

    {% if request.user.is_superuser %}
    <a href="{% url 'admin:anatomy_anatomyquestion_change' question.id %}"
        title="Edit the Question using the admin interface">Admin Edit</a>
    <a href="{% url 'anatomy:question_user_answers' question.id %}" title="View user answers associated with this question">User answers</a>
    {% endif %}
    {% if exam %}
    <div>

        {% if previous > -1 %}
        <a href="{% url 'anatomy:exam_question_detail' exam.id previous %}">Previous question</a>
        {% endif %}
        Viewing question as 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 %}
</div>
<button id="save-annotations">Save Annotations</button>
<div id="dicom-image" class="dicom-image" data-url="https://www.penracourses.org.uk{{ question.image.url}}"
    data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>
<div class="question">
    <div class="date">
        Created: {{ question.created_date|date:"d/m/Y" }}
    </div>
    <h1>{{ question.get_primary_answer }}</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 author in question.author.all %}
        {{ author }},
        {% endfor %}
    </div>
    <div>
        Open access: {{ question.open_access }}
    </div>
    {% include 'question_notes.html' %}
    <div>
        <details>
            <summary>
                <span id="annotation-json-toggle">Annotation JSON (+/-):</span> <span id="annotation-json-content">
            </summary>

            {% if question.image_annotations %}
            <pre>{{ question.image_annotations }}</pre>
            {% else %}
            No saved annotations.
            {% endif %}
            </span>
        </details>
    </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",
                    error: function (e) {
                        toastr.warning(`Error saving annotations`)
                        console.log(e);
                    },

                })
                // $.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 %}