{% extends 'base.html' %}
{% block title %}Songsuche{% endblock %}
{% block content %}
<input class="form-control" id="filter" type="text" placeholder="Suche nach einem Song...">
<h4 id="suggestionExplainer" class="mt-3 mb-3 text-center" style="display: none;">Oder probiere es mit einem dieser Vorschläge:</h4>
<table class="table">
    <tbody id="songtable">
    </tbody>
</table>
<div class="modal fade" id="enqueueModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Auf die Liste setzen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="songinfo container">
                <div class="row">
                    <div class="col">
                        <h5 id="songTitle"></h5>
                        <p><span id="songArtist"></span>&nbsp;<span id="songYear"></span></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1">
                        <p><i class="fas fa-info"></i></p>
                    </div>
                    <div class="col" id="indicators">
                    </div>
                </div>
                <div class="row">
                    <div class="col-1">
                        <p><i class="fas fa-file-audio"></i></p>
                    </div>
                    <div class="col">
                        <p id="songGenres"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1">
                        <p><i class="fas fa-language"></i></p>
                    </div>
                    <div class="col">
                        <p id="songLanguages"></p>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <form id="nameForm">
                    <div class="modal-body">
                        <label for="singerNameInput">Dein Name:</label>
                        <input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann"
                            required>
                        <input id="selectedId" name="selectedId" type="hidden" value="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                        <button type="submit" class="btn btn-primary" id="submitSongButton">Anmelden</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extrajs %}
<script>
    $(document).ready(function () {
        getSuggestions(10);
        $("#filter").keyup(debounce(() => songSearch()));

        $("#nameForm").submit(function (e) {
            e.preventDefault();
            submitModal();
        });
        $('#enqueueModal').on('shown.bs.modal', function (e) {
            $("#singerNameInput").focus();
        })

    });

    function getSuggestions(count) {
        $.getJSON("/api/songs/suggest", { count: count }, function (data) {
            console.log(data);
            if (data.length == 0) {
                console.log("No suggestions");
                $("#suggestionExplainer").hide();
            } else {
                $("#suggestionExplainer").show();
            }
            $.each(data, function (key, val) {
                $("#songtable").append(constructResultRow(val))
            });
        });
    }

    function constructResultRow(data) {
        let itemRow = document.createElement("tr")
        let itemCell = document.createElement("td")
        itemCell.innerHTML = data["artist"] + ` - ` + data["title"]
        itemRow.appendChild(itemCell)
        let infoCell = document.createElement("td")
        let duoindicator = document.createElement("i")
        duoindicator.classList.add("fas")
        if (data["duo"] == 0) {
            duoindicator.classList.add("fa-user")

        }
        if (data["duo"] == 1) {
            duoindicator.classList.add("fa-user-friends")
        }
        duoindicator.classList.add("ml-1")
        duoindicator.classList.add("list-indicator")
        infoCell.appendChild(duoindicator)
        if (data["explicit"] == 1) {
            let explicitindicator = document.createElement("i")
            explicitindicator.classList.add("fas")
            explicitindicator.classList.add("fa-e")
            explicitindicator.classList.add("ml-1")
            infoCell.appendChild(explicitindicator)
        }
        itemRow.appendChild(infoCell)
        let buttonCell = document.createElement("td")
        let button = document.createElement("button")
        button.classList.add("btn")
        button.classList.add("btn-primary")
        button.classList.add("justify-content-center")
        button.classList.add("align-content-between")
        button.classList.add("enqueueButton")
        button.setAttribute("type", "button")
        button.setAttribute("data-toggle", "modal")
        button.setAttribute("data-target", "#enqueueModal")
        button.setAttribute("onclick", "setSelectedId(" + data["karafun_id"] + ")")
        let buttonIcon = document.createElement("i")
        buttonIcon.classList.add("fas")
        buttonIcon.classList.add("fa-plus")
        button.appendChild(buttonIcon)
        buttonCell.appendChild(button)
        itemRow.appendChild(buttonCell)
        return itemRow
    }

    function enqueue(client_id, id, name, success_callback, blocked_callback) {
        var data = {
            "name": name,
            "id": id,
            "client_id": client_id
        }
        $.ajax({
            type: 'POST',
            url: '/api/enqueue',
            data: JSON.stringify(data),
            success: success_callback,
            statusCode: {
                423: blocked_callback
            },
            contentType: "application/json",
            dataType: 'json'
        });
    }

    function setSelectedId(id) {
        $("#songArtist").html("");
        $("#songTitle").html("");
        $("#songYear").html("");
        $("#indicators")[0].innerHTML = "";

        $("#selectedId").attr("value", id);
        $.getJSON("/api/songs/details/" + id, function (data) {
            $("#songTitle").html(data["title"]);
            $("#songArtist").html(data["artist"]);
            $("#songYear").html(data["year"]);
            $("#indicators")[0].innerHTML = "";

            let duoindicator_badge = document.createElement("span");
            duoindicator_badge.classList.add("badge");
            duoindicator_badge.classList.add("badge-secondary");
            duoindicator_badge.classList.add("badge-pill");
            duoindicator_badge.classList.add("mx-1");
            duoindicator_badge.classList.add("p-2");

            if (data["duo"] == 0) {
                duoindicator_badge.innerHTML = "Solo";
                let duoindicator = document.createElement("i");
                duoindicator.classList.add("fas");
                duoindicator.classList.add("fa-user");
                duoindicator.classList.add("ml-1");
                duoindicator_badge.appendChild(duoindicator);
                $("#indicators")[0].appendChild(duoindicator_badge)
            }

            if (data["duo"] == 1) {
                duoindicator_badge.innerHTML = "Duo";
                let duoindicator = document.createElement("i");
                duoindicator.classList.add("fas");
                duoindicator.classList.add("fa-user-friends");
                duoindicator.classList.add("ml-1");
                duoindicator_badge.appendChild(duoindicator);
                $("#indicators")[0].appendChild(duoindicator_badge)
            }

            if (data["explicit"] == 1) {
                let explicitindicator_badge = document.createElement("span");
                explicitindicator_badge.classList.add("badge");
                explicitindicator_badge.classList.add("badge-secondary");
                explicitindicator_badge.classList.add("badge-pill");
                explicitindicator_badge.classList.add("mx-1");
                explicitindicator_badge.classList.add("p-2");
                explicitindicator_badge.innerHTML = "Explicit";
                let explicitindicator = document.createElement("i");
                explicitindicator.classList.add("fas");
                explicitindicator.classList.add("fa-e");
                explicitindicator.classList.add("ml-1");
                explicitindicator_badge.appendChild(explicitindicator);
                $("#indicators")[0].appendChild(explicitindicator_badge)
            }

            let styles = data["styles"].split(",");
            let languages = data["languages"].split(",");

            $("#songGenres").html("");
            $("#songLanguages").html("");

            for (let i = 0; i < styles.length; i++) {
                let badge = document.createElement("span");
                badge.classList.add("badge");
                badge.classList.add("badge-secondary");
                badge.classList.add("badge-pill");
                badge.classList.add("mx-1");
                badge.classList.add("p-2");
                badge.innerHTML = styles[i];
                $("#songGenres")[0].appendChild(badge);
            }

            for (let i = 0; i < languages.length; i++) {
                let badge = document.createElement("span");
                badge.classList.add("badge");
                badge.classList.add("badge-secondary");
                badge.classList.add("badge-pill");
                badge.classList.add("mx-1");
                badge.classList.add("p-2");
                badge.innerHTML = languages[i];
                $("#songLanguages")[0].appendChild(badge);
            }
        });
    }

    function submitModal() {
        var name = $("#singerNameInput").val();
        var id = $("#selectedId").attr("value");
        enqueue(localStorage.getItem("clientId"), id, name, function (response) {
            entryID = response["entry_id"];
            toast = {
                title: "Erfolgreich eingetragen",
                message: "Du wurdest erfolgreich eingetragen.",
                status: TOAST_STATUS.SUCCESS,
                timeout: 5000
            }
            Toast.create(toast);
            addEntry(entryID);
            $("#enqueueModal").modal('hide');
            window.location.href = '/#end';
        }, function (response) {
            bootbox.alert({
                message: "Deine Eintragung konnte leider nicht vorgenommen werden.\nGrund: " + response.responseJSON.status,
            });
            entriesAccepted();
            $("#enqueueModal").modal('hide');

        });


    }

    function songSearch() {
        let value = $("#filter").val()
        if (value.length >= 1) {
            $("#suggestionExplainer").hide();
            $.getJSON("/api/songs/search", { q: value }, function (data) {
                var items = [];
                $("#songtable").html("")
                $.each(data, function (key, val) {
                    $("#songtable").append(constructResultRow(val))
                });


                $(items.join("")).appendTo("#songtable");
                entriesAccepted()
            });
        } else {
            $("#songtable").html("")
            getSuggestions(10);
        }
    }

    function debounce(func, timeout = 300) {
        let timer;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => { func.apply(this, args); }, timeout);
        };
    }


    {% if not auth %}
    function entriesAccepted() {
        $.getJSON("/api/entries/accept", (data, out) => {
            if (data["value"] == 0) {
                $(".enqueueButton").prop("disabled", true)
                $(".enqueueButton").prop("style", "pointer-events: none;")
                $(".enqueueButton").wrap("<span class='tooltip-span' tabindex='0' data-toggle='tooltip' data-placement='top'></span>");
                $(".tooltip-span").prop("title", "Eintragungen sind leider momentan nicht möglich.")
                $('[data-toggle="tooltip"]').tooltip()
            } else {
                $(".enqueueButton").prop("disabled", false)

            }

        })
    }
    {% else %}
    function entriesAccepted() {
        $(".enqueueButton").prop("disabled", false)
    }
    {% endif %}

</script>
{% endblock %}