{% extends "/Bases/StandardWebPage.html.twig" %}

{% block content %}

    <script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
    <!--<script src="/Static/JS/ThirdParty/midijs.js"></script>-->
    <script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>


    <!--<script src="/Static/JS/ThirdParty/abcjs-plugin-min.js"></script>-->
    <link rel="stylesheet" href="/Static/CSS/ThirdParty/abcjs-audio.css">

    <script>
        function VoteOnTune(type)
        {
            API_GET('/V1/RateTune.php?tune-id={{ TuneDetails.ID }}&type='+type)
                .then(payload => {
                    console.log(payload);
                    document.getElementById('LikeButton').classList.remove('active');
                    document.getElementById('DislikeButton').classList.remove('active');
                    if(payload['NewVoteValue'] === -1)
                        document.getElementById('DislikeButton').classList.add('active');
                    else if(payload['NewVoteValue'] === 1)
                        document.getElementById('LikeButton').classList.add('active');
                    document.getElementById('LikeCount').innerHTML = payload['LikeCount'];
                    document.getElementById('DislikeCount').innerHTML = payload['DislikeCount'];
                })
                .catch(error => {
                    console.error("Error fetching ABC data:", error);
                });
        }
    </script>


    <div class="InnerContent">
        <div>
            <div class="container">
                <div class="left-main">
                    <div id="NotationContainer--{{ TuneDetails.ID }}" class="ThreeDContainer NotationContainer"></div>

                    <div class="ThreeDContainer RawABCReadoutContainer ">
                        <h2>{{ "ABC Notation"|translate }}</h2>
                        <pre id="RawABCReadout--{{ TuneDetails.ID }}"></pre>
                    </div>
                </div>
                <div class="right">

                    <div class="ThreeDContainer">
                        <h2>{{ "Audio"|translate }}</h2>
                        <pre id="MIDI--{{ TuneDetails.ID }}"></pre>
                        <button onclick="MIDIjs.play('/API/V1/GetMIDIFile.php?tune-id={{ TuneDetails.ID }}');">{{ "Play"|translate }}</button>
                        <button onclick="MIDIjs.stop();">{{ "Stop"|translate }}</button>
                    </div>

                    <div class="ThreeDContainer">
                        <div class="DLContainer">
                            <h2>{{ "Tune Overview"|translate }}</h2>
                            <dl>

                                <dt>{{ "Copyright"|translate }}</dt>
                                <dd>{{ TuneDetails.Copyright }}</dd>

                                <dt>{{ "Number of Parts"|translate }}</dt>
                                <dd>{{ TuneDetails.Parts|json_encode }}</dd>
                            </dl>
                        </div>
                    </div>

                    <div id="RatingContainer" class="ThreeDContainer" >
                        <h2>{{ "Rating"|translate }}</h2>
                        <div class="RatingButtons">
                            {% if _SESSION_.IS_LOGGED_IN %}
                                <button id="DislikeButton" onclick="VoteOnTune('DISLIKE');" {% if MyVote == -1 %}class="active"{% endif %}>👎</button>
                                <button id="LikeButton" onclick="VoteOnTune('LIKE');" {% if MyVote == 1 %}class="active"{% endif %}>👍</button>
                            {% else %}
                                <em>{{ "Log in to vote"|translate }}</em>
                            {% endif %}
                        </div>
                        <div class="Counts">
                            |
                            <span>👎 <span id="DislikeCount">{{ TuneDetails.Dislikes }}</span></span>
                            |
                            <span>👍 <span id="LikeCount">{{ TuneDetails.Likes }}</span></span>
                            |
                            <span>⭐ <span id="BookmarkCount">{{ TuneDetails.Bookmarks }}</span></span>
                            |
                        </div>
                    </div>

                    <div class="ThreeDContainer">
                        <h2>{{ "Sets this tune is in"|translate }}</h2>
                        <ul>
                            {% for tuneSet in SetsThisTuneIsIn %}
                                <li>
                                    <a href="/tune-set/{{ tuneSet.TuneSetID }}">{{ tuneSet.TuneSetName }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="ThreeDContainer">
                        <h2>{{ "Similar Tunes"|translate }}</h2>
                            {% for tunePartLetter, similarTuneParts in SimilarTuneParts %}
                                <h3>Part {{ tunePartLetter }} is similar to...</h3>
                                <ul>
                                    {% for temp in similarTuneParts %}
                                        <li>
                                            <a href="/tune/{{ temp.TuneID }}">
                                                {{ temp.TuneTitle }} (part {{ temp.TunePartLetter }})
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endfor %}
                    </div>

                    <hr>
                </div>
            </div>
        </div>
    </div>

    <script>
        if (!window.ABCJS) {
            console.error("ABCJS library failed to load.");
        }
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const targetTuneID = '{{ TuneDetails.ID }}';
            API_GET_TEXT("/V1/GetABCFile.php?tune-id=" + targetTuneID)
                .then(payload => {
                    // Ensure required DOM elements exist
                    const notationContainer = document.getElementById("NotationContainer--" + targetTuneID);
                    const rawABCContainer = document.getElementById("RawABCReadout--" + targetTuneID);
                    const midiContainer = document.getElementById("MIDI--" + targetTuneID);

                    if (!notationContainer || !rawABCContainer || !midiContainer) {
                        console.error(`Missing DOM elements for targetTuneID: ${targetTuneID}`);
                        return;
                    }

                    // Render the ABC notation
                    const tunes = window.ABCJS.renderAbc(
                        notationContainer.id,
                        payload,
                        {
                            add_classes: true,
                            format: {
                                gchordfont: "Atkinson Hyperlegible",
                                annotationfont: "Atkinson Hyperlegible",
                                headerfont: "Atkinson Hyperlegible",
                                infofont: "Atkinson Hyperlegible",
                                repeatfont: "Atkinson Hyperlegible",
                                tempofont: "Atkinson Hyperlegible",
                                titlefont: "Atkinson Hyperlegible",
                                voicefont: "Atkinson Hyperlegible",
                                wordsfont: "Atkinson Hyperlegible",
                            },
                        }
                    );

                    // Display raw ABC notation
                    rawABCContainer.innerHTML = payload;



                    window.ABCJS.startAnimation(notationContainer.id, tunes[0], {
                        showCursor: true,
                    });
                })
                .catch(error => {
                    console.error("Error fetching ABC data:", error);
                });
        });
    </script>
{% endblock %}