{% extends 'base.html' %}

{% block body %}

<div class="container">
    <div class="row mb-1 mt-1">
        {% include "nav.html" %}
    </div>
</div>

<div class="container">

    <!-- Header -->
    <div class="row mb-1 mt-1">

        <div class="col-md-4 bg-secondary">
            <div class="row mt-2">
                <div class="btn-group" role="group" aria-label="Control buttons">
                    <button class="btn btn-info" type="button" id="panic">Panic</button>
                    <button class="btn btn-dark" type="button" id="query">Query</button>
                    <button class="btn btn-warning" type="button" id="restart">Restart</button>
                    <button class="btn btn-danger" type="button" id="quit">Quit</button>
                </div>
            </div>
        </div>

        <div class="col-md-8 bg-light">
            <div class="row">
                <div class="col-md-10">
                    <h3>
                        <!-- Fil d'ariane -->
                        /<span class="text-primary" id="current_scene_name" style="white-space: nowrap;"></span>/<span
                            class="text-info" id="current_subscene_name" style="white-space: nowrap;"></span>
                    </h3>
                </div>
                <div class="col-md-2">
                    <span id="current_scene"></span>.<span id="current_subscene"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Body of the scenes and subscenes -->
    <div class="row">
        <!-- List of scenes -->
        <div id="scenes" class="col-md-4 bg-light"> </div>
        <!-- Sub-scene of the current scene -->
        <div id="subscenes" class="col-md-8 bg-light"> </div>
    </div>

    <!-- mididings/fastpi states and scene/subscene navigation buttons -->
    <div class="row mt-1">
        <!-- Application status console -->
        <div class="col-md-4 bg-secondary">
            <!-- Console header -->
            <div class="row mt-2">
                <div class="bg-secondary col-md-6">
                    <div class="card text-center bg-light border-dark-subtle">
                        <div class="card-header">
                            mididings state
                        </div>
                        <div id="mididings-state" class="bg-secondary col-md-6 w-100">
                        </div>
                    </div>
                </div>
                <div class="bg-secondary col-md-6 text-center">
                    <div class="card bg-light border-dark-subtle">
                        <div class="card-header">
                            FastAPI state
                        </div>
                        <div id="server-state" class="bg-secondary col-md-6 w-100">
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!-- Scene and Sub-Scene navigation -->
        <div class="col-md-8 bg-light">
            <div class="row mt-1">
                <div class="btn-group" role="group" aria-label="Navigation buttons">
                    <button class="btn btn-outline-primary" type="button" id="prev_scene">⏪ Previous Scene</button>
                    <button class=" btn btn-outline-primary" type="button" id="next_scene">⏩ Next
                        Scene</button>
                </div>
            </div>
            <div class="row mt-1">
                <div class="btn-group" role="group" aria-label="Navigation buttons">
                    <button class="btn btn-outline-primary" type="button" id="prev_subscene">⏮️ Previous
                        Sub-Scene</button>
                    <button class="btn btn-outline-primary" type="button" id="next_subscene">⏭️ Next
                        Sub-Scene</button>
                </div>
            </div>
        </div>
    </div>

</div>

{% endblock body %}

{% block websockets %}

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {

        let scheme = window.location.protocol === "https:" ? "wss" : "ws";
        let host = window.location.host;
        let socket = new WebSocket(`${scheme}://${host}/ws`);

        socket.onopen = function (event) {
            socket.send('{"action" : "on_connect"}');
            $('#mididings-state').html('<div class="card border-success">RUNNING</div>');
            $('#server-state').html('<div class="card border-success">RUNNING</div>');
        }

        socket.onclose = function (event) {
            $('#mididings-state').html('<div class="card border-danger">UNKNOWN</div>');
            $('#server-state').html('<div class="card border-danger">STOPPED</div>');
        }

        socket.onmessage = function (event) {
            const json = JSON.parse(event.data);
            const action = json["action"];
            const payload = json["payload"];
            switch (action) {
                case "mididings_context_update":
                    refresh(payload);
                    break;
                case "on_exit":
                    exit();
                    break;
                case "on_start":
                    start();
                    break;
                default:
                    break;
            }
        }

        function start() {
            $('#mididings-state').html('<div class="card border-success">RUNNING</div>');
        }

        function exit() {
            $('#mididings-state').html('<div class="card border-danger">STOPPED</div>');
        }

        function terminate() {
            socket.close();
            $('#server-state').html('<div class="card border-danger">STOPPED</div>');
            $('#mididings-state').html('<div class="card border-danger">STOPPED</div>');
        }

        function refresh(context) {
            //
            // Redraw the content section
            //                
            var count = 0;
            var content = "";
            var subscenes = [];

            // Reset view
            $("#scenes").text("");
            $('#subscenes').text("");
            $('#current_subscene_name').text("...");
            $('#current_subscene').text("0");

            // Scenes
            for (let index in context.items) {

                var scene = context.items[index];

                if (count % 2 == 0)
                    content += "<div class='row mt-1 mb-1'>";

                // Button style
                var button_class = "'w-100 btn btn-block switch_scene ";
                if (scene.current) {
                    $('#current_scene').text(scene.id);
                    $('#current_scene_name').text(scene.name);
                    button_class += "btn-primary'";
                    subscenes = scene.subscenes;
                }
                else
                    button_class += "btn-outline-dark'";

                content += "<div class='col-md-6'>";
                content += "<input class=" + button_class + " type='button' name='" + scene.id.toString() + "' value='" + scene.name + "'>";
                content += "</div>";

                count++;

                if (count % 2 == 0)
                    content += "</div>";
            }
            $('#scenes').text("");
            $("#scenes").append(content);

            // Subscenes 
            count = 0;
            content = "";

            for (let index in subscenes) {

                var scene = subscenes[index];

                if (count % 4 == 0)
                    content += "<div class='row mt-1 mb-1'>";

                // Button style
                var button_class = "'w-100 btn btn-block switch_subscene ";
                if (scene.current) {
                    button_class += "btn-info'";
                    $('#current_subscene').text(scene.id);
                    $('#current_subscene_name').text(scene.name);
                }
                else
                    button_class += "btn-outline-dark'";

                content += "<div class='col-md-3'>";
                content += "<input class=" + button_class + " type='button' name='" + scene.id.toString() + "' value='" + scene.name + "'>";
                content += "</div>";

                count++;

                if (count % 4 == 0)
                    content += "</div>";
            }
            $('#subscenes').append(content);
        }

        // Scene navigation delegate
        $("#scenes").delegate("input.switch_scene", "click", function (event) {
            socket.send(JSON.stringify({
                action: "switch_scene",
                id: $(this).attr('name')
            }));
        });

        // Sub-Scene navigation delegate
        $("#subscenes").delegate("input.switch_subscene", "click", function (event) {
            socket.send(JSON.stringify({
                action: "switch_subscene",
                id: $(this).attr('name')
            }));
        });

        $('#next_scene').click(function (event) {
            socket.send('{"action" : "next_scene"}');
        });

        $('#prev_scene').click(function (event) {
            socket.send('{"action" : "prev_scene"}');
        });

        $('#next_subscene').click(function (event) {
            socket.send('{"action" : "next_subscene"}');
        });

        $('#prev_subscene').click(function (event) {
            socket.send('{"action" : "prev_subscene"}');
        });

        $('#restart').click(function (event) {
            socket.send('{"action" : "restart"}');
        });

        $('#panic').click(function (event) {
            socket.send('{"action" : "panic"}');
        });

        $('#query').click(function (event) {
            socket.send('{"action" : "query"}');
        });

        $('#quit').click(function (event) {
            socket.send('{"action" : "quit"}');
        });
    });
    window.addEventListener("beforeunload", () => {
        socket.close();
    });
</script>

{% endblock websockets %}