{% extends 'base.html.twig' %}

{% block title %}{{ song.title }} on SpinShare{% endblock %}

{% block meta %}
    <meta property="og:title" content="{{ song.title }} on SpinShare"/>
    <meta property="og:description" content="Charted by {{ song.charter }} &dash; Views: {{ song.views|default(0) }}, Downloads: {{ song.downloads|default(0) }}"/>
    <meta property="og:type" content="music.song"/>
    <meta property="og:url" content="{{ path('song.detail', {songId: song.id}) }}"/>
    <meta property="og:image" content="{{ asset("uploads/thumbnail/" ~ song.fileReference ~ ".jpg?v=" ~ date().timestamp) }}"/>
{% endblock %}

{% block content %}
    <section class="section-song-detail">
        <div class="song-detail-background" style="background-image: url({{ asset("uploads/thumbnail/" ~ song.fileReference ~ ".jpg?v=" ~ date().timestamp) }}), url({{ asset("assets/img/defaultAlbumArt.jpg") }});">
            <div class="song-detail-background-cover"></div>
        </div>
        <div class="song-detail">
            <div class="song-meta">
                <div class="cover" style="background-image: url({{ asset("uploads/thumbnail/" ~ song.fileReference ~ ".jpg?v=" ~ date().timestamp) }}), url({{ asset("assets/img/defaultAlbumArt.jpg") }});"></div>
                <div class="song-metadata">
                    <div class="song-title">{{ song.title }}</div>
                    <div class="song-subtitle">{{ song.subtitle }}</div>
                    <div class="song-artist">{{ song.artist }} &bull; Charted by {{ song.charter }}</div>
                </div>
            </div>
            <div class="song-actions">
                <div class="action-row">
                    <a href="{{ path('song.download', {songId: song.id}) }}" class="action">
                        <div class="icon">
                            <i class="mdi mdi-download"></i>
                        </div>
                    </a>
                    <div class="action-player">
                        <div class="icon">
                            <i class="mdi mdi-play"></i>
                        </div>
                        <div class="volume">
                            <input type="range" min="0" max="100" value="50" class="playerVolume" onInput="UpdateVolume()" />
                        </div>
                    </div>
                    <a href="spinshare-song://{{ song.id }}" class="action">
                        <div class="icon">
                            <i class="mdi mdi-open-in-new"></i>
                        </div>
                    </a>
                    <a href="{{ path('report.song', {songId: song.id}) }}" class="action">
                        <div class="icon">
                            <i class="mdi mdi-flag-outline"></i>
                        </div>
                    </a>
                {% if is_granted('ROLE_USER') %}
                    </div>
                    <div class="action-row">
                        {% if uploader.id == app.user.id %}
                            <a href="{{ path('song.update', {songId: song.id}) }}" class="action">
                                <div class="icon">
                                    <i class="mdi mdi-pencil"></i>
                                </div>
                            </a>
                            <a href="{{ path('song.delete', {songId: song.id}) }}" class="action">
                                <div class="icon">
                                    <i class="mdi mdi-delete"></i>
                                </div>
                            </a>
                        {% elseif is_granted('ROLE_MODERATOR') %}
                            <a href="{{ path('moderation.song.remove', {songId: song.id}) }}" onclick="return confirm('Are you sure? This action cannot be undone!')" class="action">
                                <div class="icon">
                                    <i class="mdi mdi-delete"></i>
                                </div>
                            </a>
                        {% endif %}
                        <div class="action" onclick="openPlaylistOverlay()">
                            <div class="icon">
                                <i class="mdi mdi-playlist-plus"></i>
                            </div>
                        </div>
                {% endif %}
                </div>
            </div>
            <div class="song-statistics">
                <div class="stat">
                    <div class="icon">
                        <i class="mdi mdi-arm-flex"></i>
                    </div>
                    <div class="difficulties">
                        <img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
                        <img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
                        <img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
                        <img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
                        <img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
                    </div>
                </div>
                {% if song.uploadDate|date("Y") > 2000 %}
                <div class="stat">
                    <div class="icon">
                        <i class="mdi mdi-calendar-clock"></i>
                    </div>
                    <div class="content">
                    {{ song.uploadDate|date("dS F Y") }}
                    </div>
                </div>
                {% endif %}
                <div class="stat">
                    <div class="icon">
                        <i class="mdi mdi-eye"></i>
                    </div>
                    <div class="content">
                    {{ song.views|default(0) }}
                    </div>
                </div>
                <div class="stat">
                    <div class="icon">
                        <i class="mdi mdi-download"></i>
                    </div>
                    <div class="content">
                    {{ song.downloads|default(0) }}
                    </div>
                </div>
            </div>
            <div class="song-uploader">
                <div class="label">Uploaded by</div>
                <a href="{{ path('user.detail', {userId: uploader.id}) }}" class="user-item">
                    <div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ uploader.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
                    <div class="user-metadata">
                        <div class="user-username">{{ uploader.username }}</div>
                        {% if uploader.isVerified %}
                            <div class="user-badge"><i class="mdi mdi-check-decagram"></i></div>
                        {% endif %}
                        {% if uploader.isPatreon %}
                            <div class="user-badge"><i class="mdi mdi-patreon"></i></div>
                        {% endif %}
                    </div>
                </a>
            </div>
            {% if song.tags != "" or song.description != "" %}
                <div class="song-description">
                    {% if song.description != "" %}
                        <div class="text">{{ song.description|default("No description provided.")|nl2br }}</div>
                    {% endif %}
                    {% if song.tags != "" %}
                        <div class="tags">
                            {% for tag in song.tagsArray %}
                                <a href="{{ path('search.index', {q: tag}) }}" class="tag">{{ tag }}</a>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>
        <div class="song-social">
            <div class="tab-header">
                <a href="{{ path('song.detail', {songId: song.id, tab: 'reviews'}) }}" class="tab-header-item tab-header-item-reviews {{ activeTab == 'reviews' ? 'active' : '' }}">Reviews</a>
                <a href="{{ path('song.detail', {songId: song.id, tab: 'spinplays'}) }}" class="tab-header-item tab-header-item-spinplays {{ activeTab == 'spinplays' ? 'active' : '' }}">SpinPlays</a>
            </div>
            {% if activeTab == 'reviews' %}
                <div class="tab tab-reviews">
                    <div class="review-overview">
                        <div class="icon">
                            <i class="mdi mdi-thumbs-up-down"></i>
                        </div>
                        <div class="text">
                            {% if reviewAverage == false %}
                                <div class="percentage">???%</div>
                                <div class="label">RECOMMENDED</div>
                                <div class="disclaimer">This chart does not have enough user-reviews yet.</div>
                            {% else %}
                                <div class="percentage">{{ reviewAverage }}%</div>
                                <div class="label">RECOMMENDED</div>
                                <div class="disclaimer">Based on {{ reviews|length }} user-reviews</div>
                            {% endif %}
                        </div>
                        {% if app.user != uploader %}
                            {% if is_granted('ROLE_USER') %}
                                {% if userReview == false %}
                                    <a href="{{ path('song.detail', {songId: song.id, tab: 'reviews', action: 'add'}) }}" class="action-button">Add Review</a>
                                {% endif %}
                            {% else %}
                                <a href="{{ path('fos_user_security_login') }}" class="action-button">Login to Review</a>
                            {% endif %}
                        {% endif %}
                    </div>
                    {% if activeAction == '' %}
                        {% if reviews|length > 0 %}
                            <div class="reviews">
                                {% for review in reviews %}
                                    <div class="review">
                                        <div class="metadata">
                                            <a href="{{ path('user.detail', {userId: review.user.id}) }}" class="avatar" style="background-image: url({{ asset('uploads/avatar/' ~ review.user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></a>
                                            <div class="text">
                                                <a href="{{ path('user.detail', {userId: review.user.id}) }}" class="username">{{ review.user.username }}</a>
                                                <div class="subline">
                                                    <i class="mdi {{ review.recommended ? 'mdi-thumb-up positive' : 'mdi-thumb-down negative' }}"></i>
                                                    <span>{{ review.reviewDate|date("dS F Y") }}</span>
                                                </div>
                                            </div>
                                            <div class="actions">
                                                {% if is_granted('ROLE_MODERATOR') or review.user == app.user %}
                                                    <a href="{{ path('song.review.delete', {songId: song.id, reviewId: review.id}) }}" class="action"><i class="mdi mdi-trash-can-outline"></i></a>
                                                {% endif %}
                                            </div>
                                        </div>
                                        {% if review.comment != "" %}
                                            <div class="comment" id="comment-{{ review.id }}">{{ review.comment|nl2br }}</div>
                                            <div class="toggleComment" id="toggleComment-{{ review.id }}" onclick="ToggleComment({{ review.id }})">Show more</div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="no-reviews">
                                <div class="icon">
                                    <i class="mdi mdi-comment-question"></i>
                                </div>
                                <div class="text">
                                    <div class="title">There are no reviews yet.</div>
                                    <div class="explaination">Come back later or write a new one!</div>
                                </div>
                            </div>
                        {% endif %}
                    {% elseif activeAction == 'add' %}
                        <form action="" method="post" class="form-add">
                            <div class="form-item">
                                <label for="reviewRecommended">Do you recommend this chart?</label>
                                <div class="recommend-group">
                                    <label class="recommend-radio">
                                        <input type="radio" checked="checked" name="reviewRecommended" value="yes" />
                                        <div class="check check-positive"><i class="mdi mdi-thumb-up"></i></div>
                                    </label>
                                    <label class="recommend-radio">
                                        <input type="radio" name="reviewRecommended" value="no" />
                                        <div class="check check-negative"><i class="mdi mdi-thumb-down"></i></div>
                                    </label>
                                </div>
                            </div>
                            <div class="form-item">
                                <label for="reviewComment">Comment (optional)</label>
                                <textarea name="reviewComment" rows="5" placeholder="Write about the flow, difficulty or the patterns of the chart"></textarea>
                            </div>
                            <div class="form-actions">
                                <input type="submit" name="submitReview" value="Submit" />
                                <a href="{{ path('song.detail', {songId: song.id, tab: 'reviews'}) }}" class="button">Cancel</a>
                            </div>
                        </form>
                    {% endif %}
                </div>
            {% else %}
                <div class="tab tab-spinplays">
                    {% if activeAction == '' %}
                        <div class="spinplay-overview">
                            <div class="icon">
                                <i class="mdi mdi-youtube"></i>
                            </div>
                            <div class="text">
                                    <div class="label">Add your Gameplay Video</div>
                                    <div class="disclaimer">Did you play this chart? Submit your video and get featured here!</div>
                            </div>
                            {% if is_granted('ROLE_USER') %}
                                <a href="{{ path('song.detail', {songId: song.id, tab: 'spinplays', action: 'add'}) }}" class="action-button">Submit Video</a>
                            {% else %}
                                <a href="{{ path('fos_user_security_login') }}" class="action-button">Login to Submit</a>
                            {% endif %}
                        </div>
                        {% if spinplays|length > 0 %}
                            <div class="spinplays">
                                {% for spinplay in spinplays %}
                                    <div class="spinplay">
                                        <a href="{{ spinplay.videoUrl }}" target="_blank" class="thumbnail" style="background-image: url('{{ spinplay.videoThumbnail }}');"></a>
                                        <div class="metadata">
                                            <div class="avatar" style="background-image: url({{ asset('uploads/avatar/' ~ spinplay.user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
                                            <div class="username">{{ spinplay.user.username }}</div>
                                            <div class="actions">
                                                {% if is_granted('ROLE_MODERATOR') or spinplay.user == app.user or uploader == app.user %}
                                                    <a href="{{ path('song.spinplay.delete', {songId: song.id, spinplayId: spinplay.id}) }}" class="action"><i class="mdi mdi-trash-can-outline"></i></a>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="no-spinplays">
                                <div class="icon">
                                    <i class="mdi mdi-youtube"></i>
                                </div>
                                <div class="text">
                                    <div class="title">There are no SpinPlays yet.</div>
                                    <div class="explaination">Come back later or submit a new one!</div>
                                </div>
                            </div>
                        {% endif %}
                    {% elseif activeAction == 'add' %}
                        {% if is_granted('ROLE_USER') %}
                            <form action="" method="post" class="form-add">
                                <div class="form-item">
                                    <label for="spinPlaysUrl">YouTube Url</label>
                                    <input type="text" name="spinPlayUrl" placeholder="https://youtube.com/watch?v=dQw4w9WgXcQ or https://youtu.be/dQw4w9WgXcQ" />
                                </div>
                                <div class="form-actions">
                                    <input type="submit" name="submitSpinPlay" value="Submit" />
                                    <a href="{{ path('song.detail', {songId: song.id, tab: 'spinplays'}) }}" class="button">Cancel</a>
                                </div>
                            </form>
                        {% endif %}
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </section>

    {% if is_granted('ROLE_USER') %}
        <div class="playlist-overlay">
            <div class="close" onclick="closePlaylistOverlay()"><i class="mdi mdi-close"></i></div>

            <form action="" method="POST" class="overlay-content">
                <div class="title">ADD TO PLAYLIST</div>
                <div class="playlist-list">
                    {% if is_granted('ROLE_MODERATOR') %}
                        {% for key,playlist in userPlaylists %}
                            {% set isInPlaylist = false %}
                            {% for playlistSong in playlist.songs %}
                                {% if playlistSong.id == song.id %}
                                    {% set isInPlaylist = true %}
                                {% endif %}
                            {% endfor %}

                            <label class="playlist-item">
                                <input type="checkbox" name="playlist_{{ key }}" {{ isInPlaylist ? 'checked' : '' }} />
                                <span>{{ playlist.title }}</span>
                            </label>
                        {% endfor %}
                        {% if userPlaylists|length == 0 %}
                            <div class="playlist-empty">You don't have any playlists yet.</div>
                        {% endif %}
                    {% else %}
                        <div class="playlist-empty">Coming Soon</div>
                    {% endif %}
                </div>
                <div class="actions">
                    <div class="button" onclick="closePlaylistOverlay()">Close</div>
                    {% if is_granted('ROLE_MODERATOR') %}<input type="submit" value="Save" name="submitPlaylist" class="button" />{% endif %}
                </div>
            </form>
        </div>
    {% endif %}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ asset('assets/css/songdetail.css?v=' ~ date().timestamp) }}" />
{% endblock %}

{% block scripts %}
    <script>
        // Song Preview
        let songActionsRow = document.querySelector(".action-row");
        let playerToggle = document.querySelector(".song-actions .action-player .icon");
        let playerVolume = document.querySelector(".song-actions .playerVolume");

        let isPlaying = false;
        let currentPreviewAudio;

        playerToggle.addEventListener('click', () => {
            isPlaying = !isPlaying;

            if(isPlaying) {
                PlayPreview();
            } else {
                StopPreview();
            }
        });

        function PlayPreview() {
            currentPreviewAudio = new Audio("{{ asset('uploads/audio/' ~ song.fileReference ~ '_0.ogg') }}");
            currentPreviewAudio.volume = 0.5;
            playerVolume.value = 50;
            currentPreviewAudio.play();
            currentPreviewAudio.onended = function() {
                StopPreview();
            }
            isPlaying = true;

            songActionsRow.classList.add("player-active");
            playerToggle.innerHTML = '<i class="mdi mdi-stop"></i>';
        }

        function StopPreview() {
            if(currentPreviewAudio) {
                currentPreviewAudio.pause();
                currentPreviewAudio.currentTime = 0;
            }
            currentPreviewAudio = null;
            isPlaying = false;

            songActionsRow.classList.remove("player-active");
            playerToggle.innerHTML = '<i class="mdi mdi-play"></i>';
        }

        function UpdateVolume() {
            currentPreviewAudio.volume = playerVolume.value / 100;
        }
    </script>
    <script>
        // Comments
        function ToggleComment(commentID) {
            let DOMtoggleComment = document.querySelector("#toggleComment-" + commentID);
            let DOMcomment = document.querySelector("#comment-" + commentID);

            if(DOMcomment.classList.contains('collapsed')) {
                DOMtoggleComment.innerText = "Show less";
                DOMcomment.classList.remove('collapsed');
            } else {
                DOMtoggleComment.innerText = "Show more";
                DOMcomment.classList.add('collapsed');
            }
        }

        let DOMAllToggleComments = document.querySelectorAll(".toggleComment");
        DOMAllToggleComments.forEach((DOMtoggleComment) => {
            let commentID = DOMtoggleComment.id.replace("toggleComment-", "");
            let DOMcomment = document.querySelector("#comment-" + commentID);

            console.log(DOMcomment.offsetHeight);

            if(DOMcomment.offsetHeight > 84) {
                DOMcomment.classList.add('collapsed');
                DOMtoggleComment.style.display = "block";
            } else {
                DOMtoggleComment.style.display = "none";
            }
        });
    </script>
    <script>
        let UIPlaylistOverlay = document.querySelector(".playlist-overlay");

        function openPlaylistOverlay() {
            UIPlaylistOverlay.classList.add("active");
        }

        function closePlaylistOverlay() {
            UIPlaylistOverlay.classList.remove("active");
        }
    </script>
{% endblock %}