{% extends "base.html" %}

{% block content %}
    
    <p>
    Ricorda che altre opzioni come rotazione, inversione verticale o orizzontale, scritte, loghi etc... 
    verranno applicate piu' tardi, quando la foto verra' inviata al server. La preview serve unicamente
    a sistemare l'inquadratura e la messa a fuoco.<br><br>
    <a href="/webcam" >Clicca qui per aggiornare la preview</a> (o ricarica la pagina).
    </p>

    <img id="preview" src="/picture-preview" style="width:min(100%, 800px); min-height: 80px; border-radius:0.5rem; background: url('{{ url_for('static', filename='logos/loading.gif') }}') no-repeat center center;">
    
    <p style="margin-top:3rem;">
    Quando inquadratura e messa a fuoco ti sembrano buone, premi Scatta Foto per inviare la prima foto al server.
    Se il server e' configurato correttamente, da quel momento in poi ZANZOCAM e' autonoma.
    </p>

    <div class="center">
        <button id="shoot-picture" onclick="shootPicture();" class="button setup-button" style="width:50%;margin-bottom:3rem;">Scatta Foto</button>
        <a href="/" class="button button-outline setup-button">Indietro</a> 
    </div>

    <p id="feedback" class="center"></p>

    <div id="logs-block" style="display: none;">
        <p style="margin:1rem;">Logs:</p>
        <p id="logs" style="white-space: pre-wrap;color:#eee;background-color:#222;padding:3rem;border-radius:1rem;"></p>
        <div class="center"><a href="/logs/text/picture" class="button" download="zanzocam-logs.txt">Scarica i log</a></div>
    </div>

    <script>

    // Function to poll the server
    const poll = async ({ fn, validate, interval, maxAttempts }) => {
        let attempts = 0;
        const executePoll = async (resolve, reject) => {
            const result = await fn();
            attempts++;
            if (validate(result)) {
                return resolve(result);
            } else {
                setTimeout(executePoll, interval, resolve, reject);
            }
        };
        return new Promise(executePoll);
    };

    
    // Ask the server for new logs
    var startingMessage = "";

    const askForLogs = async () => {
        return fetch("/logs/json/picture")
        .then(response => response.json())
        .then(logs => { 
            var logsContainer = document.getElementById("logs")
            logsContainer.innerHTML = startingMessage + logs["content"]; 
            return logs["content"];
        });
    };

    // Send the shoot-picture command to the server and read the logs
    const shootPicture = async () => {
        document.getElementById("logs").innerHTML = "Starting...\n\n";
        document.getElementById("feedback").innerHTML = "ZANZOCAM sta scattando (non lasciare la pagina!)";
        document.getElementById("shoot-picture").disabled = true;
        document.getElementById("shoot-picture").innerHTML = 'Sto scattando...';
        document.getElementById("logs-block").style.display = "block";
        
        // Start to poll
        setTimeout(function(){
            startingMessage = "Running...\n\n";
            setTimeout(function(){
                poll({
                    fn: askForLogs,
                    validate: function(result){ return (result.includes("Execution completed")); },
                    interval: 1000,
                })
                .catch(err => console.error(err));
            }, 1000);
        }, 2000);  // Initial delay

        // Shoot the picture
        fetch("/shoot-picture", {
            method:'POST',
        })
        .then(response => {
            document.getElementById("shoot-picture").disabled = false;
            document.getElementById("shoot-picture").innerHTML = 'Scatta Foto';
            if (!response.ok) {
                document.getElementById("feedback").innerHTML = "Lo scatto della foto non è andato a buon fine. "+
                "Verifica che tutti i parametri siano corretti e controlla i log per capire cosa non ha funzionato.";
                alert("Lo scatto della foto non è andato a buon fine. " +
                "Verifica che tutti i parametri siano corretti e controlla i log per capire cosa non ha funzionato.");
            } else {
                document.getElementById("feedback").innerHTML = "Foto scattata! Vai sul tuo server per assicurarti che sia arrivata.";
            }
        });
    };    
    </script>
    
{% endblock %}