{% extends 'anatomy/base.html' %}
{% load partials %}
{% block content %}
    {% load static %}
    {% include 'anatomy/question_link_header.html' %}
    <div id="anatomy-dicom-image" class="dicom-image-legacy" data-url="{{ question.get_image_url }}"
         data-annotations='{{question.image_annotations}}' data-edit_annotation=true>
        <details class="help-text">
            <summary><i class="bi bi-info-circle"></i> Help</summary>
            <p>Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. To save the changes click the "Save Annotations" button.</p>

            <p>There is no limit to the number of arrows that can be added to the image.</p>
        </details>
        <button id="save-annotations">Save Annotations</button>

    </div>
    <div class="question">
        <div class="date">
            Created: {{ question.created_date|date:"d/m/Y" }}
        </div>
        <h2>Question type: {{question.question_type}}</h2>
        <h3>Primary answer: {{ question.get_primary_answer }}</h3>
        <div>
            <details>
                <summary title="Click to view the question answers">
                    Answers:
                </summary>
                <table>
                    <tr><th>Answer</th><th>Score</th></tr>
                    {% for answer in question.answers.all|dictsortreversed:"status" %}
                        <tr>
                            <td {% if answer.proposed %}class="proposed-answer" data-aid="{{answer.pk}}" data-question-type="anatomy"
                                {% endif %}>
                                <span >
                                    {{ answer }}
                                </span>
                                <td>
                                    <td>{{answer.status}}</td>
                                    {% if answer.proposed %}
                                        <td>
                                            <button class="btn btn-sm accept-button" data-aid={{answer.id}}
                                                    hx-get="{% url 'anatomy:confirm_answer' answer.id %}"
                                                    title="Click to accept the proposed answer">Accept</button>
                                            <button class="btn btn-sm delete-button" data-aid={{answer.id}}
                                                    hx-get="{% url 'anatomy:delete_answer' answer.id %}"
                                                    title="Click to delete the proposed answer"
                                            >Delete</button>
                                        </td>
                                    {% endif %}


                                </tr>
                    {% endfor %}
                </table>
            </details>
        </div>
        <div>
            Answer help: {{ question.answer_help|safe }}
        </div>
        <div>
            {% partialdef suggest-incorrect-form inline %}
                <span id="incorrect-answers">
                Answer suggest incorrect: {{ question.answer_suggest_incorrect }}
                <button id="answer-suggest-incorrect-button" class="btn btn-sm" hx-get="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}"
                hx-target="#incorrect-answers"
                hx-swap="innerHTML">Edit suggestions</button>
                </span>
            {% endpartialdef %}
        </div>
        <div>
            Description: {{ question.description }}
        </div>
        <div>
            Exams: {% for exam in question.exams.all %}
                <a href="{% url 'anatomy:exam_overview' pk=exam.pk %}">{{ exam }}</a>
            {% endfor %}
            <button class="btn btn-sm" hx-get="{% url 'anatomy:question_add_exam' question_id=question.pk %}"
            hx-target="#exam-list"
            hx-swap="innerHTML">Edit exam(s)</button>
            <span id="exam-list"></span>
        </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("anatomy-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 %}

{% block css %}
    <style>
        .proposed-answer::before {
            content: "\F505";
            font-family: bootstrap-icons;
        }

        .question div {
            margin-bottom: 10px;
        }
    </style>
{% endblock css %}