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

{% block content %}

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

    <script>
        var lastVoteAction = "";
        function VoteOnTune(type)
        {
            if(lastVoteAction === type) return;
            lastVoteAction = type;
            API_GET('/V1/RateTune.php?tune-id={{ TuneDetails.ID }}&type='+type)
                .then(payload => {
                    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">
                    <div class="DLContainer">
                        <h2>{{ "Tune Overview"|translate }}</h2>
                        <dl>
                            <dt>{{ "Time Signature"|translate }}</dt>
                            <dd>{{ TuneDetails.TimeSignature }}</dd>

                            <dt>{{ "Key Signature"|translate }}</dt>
                            <dd>{{ TuneDetails.KeySignature }}</dd>

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

                            <dt>{{ "Number of Parts"|translate }}</dt>
                            <dd>{{ TuneDetails.Parts|json_encode }}</dd>
                        </dl>
                    </div>
                    <div id="RatingContainer">
                        <h2>{{ "Rating"|translate }}</h2>
                        <div class="RatingButtons">
                            <button id="ThumbUp" onclick="VoteOnTune('LIKE');">👍</button>
                            <button id="ThumbDown" onclick="VoteOnTune('DISLIKE');">👎</button>
                        </div>
                        <div class="Counts">
                            |
                            <span>👍 <span id="LikeCount">{{ TuneDetails.Likes }}</span></span>
                            |
                            <span>👎 <span id="DislikeCount">{{ TuneDetails.Dislikes }}</span></span>
                            |
                        </div>
                    </div>
                </div>
                <div class="center">
                    <div id="NotationContainer--{{ TuneDetails.ID }}"></div>
                    <div>
                        <h2>{{ "ABC Notation"|translate }}</h2>
                        <pre id="RawABCReadout--{{ TuneDetails.ID }}">

                </pre>
                    </div>
                </div>
                <div class="right">
                    <h2>{{ "Audio"|translate }}</h2>
                    <div id="MIDI--{{ TuneDetails.ID }}"></div>

                </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-variant-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;
                    }

                    console.log(window.ABCJS);

                    // 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 %}