<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>¿Ya salieron las pruebas nacionales?</title>
    <meta name="description" content="Con esta página para ver los resultados de las pruebas nacionales, podrás recibir una notificación en el momento en que salgan."/>
    <style>
        *,*::after,*::before{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            margin-top: 2rem;
            height: 100dvh;
            width: 90vdw;
            display:grid;
            place-content: center;
            gap: 2rem;
            text-align: center;
            background-color: <%= isOut ? "green" : "red" %>;
            color: white;
        }

        body > strong {
            font-size: 2rem;
        }

        main {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            align-items: center;
        }


        form, footer {
            display: flex;
            flex-direction: column;
            background-color: black;
            padding: 20px;
            gap: 1rem;
            border-radius: 10px;
            width: 80dvw;
        }

    button {
        align-self: center;
        width: 50%;
        padding: 20px;
        border-radius: 10px;
        background-color: red;
        color: white;
        border:none;
        outline:none;
        transition: all 300ms ease-in-out;
        &:hover {
            cursor: pointer;
            transform: scale(0.8);
        }
        &:focus{
            outline:none;
        }

    }


    #isOut {
        font-size: 3rem;
        color: <%= isOut ? "white" : "black" %>
    }
    h1 {
        color: <%= isOut ? "white" : "black" %>
    }

    .hide {
        display:none;
    }

    a {
        color: greenyellow;
        text-decoration: none;
    }

    </style>
</head>
<body>
    <h1>¿Salieron los resultados de las pruebas nacionales?</h1>
    <strong id="isOut"><%= isOut ? "¡Sí!" : "No. :(" %></strong>


  <main>
    <% if(!isOut){ %>
        <form>
            <h3>¿Deseas recibir una notificación cuando salgan los resultados?</h3>
            <p>No recibirás SPAM, pulsa el boton y acepta los permisos necesarios</p>
            <button>Notificarme</button>
        </form>
        <% } %>
    
    
            <footer>
                <p><strong>
                        <%= users %>
                    </strong> usuarios <%= isOut ? "estaban" : "están" %> esperando por los resultados.</p>

                    <a href="https://github.com/osvfj/pruebas-nacionales" target="_blank" referrerpolicy="no-referrer">Soy de código abierto, mira como estoy hecho por dentro. <3 </p>
            </footer>
    </main>

   <script>
     const $form = document.querySelector("form")
     const $btn  = $form.querySelector("button")
     const $title = $form.querySelector("h3")
     const $description = $form.querySelector("p")

     const alreadySubscribed = localStorage.getItem("subscription")
        if (alreadySubscribed) {
            $btn.classList.add("hide")
            $title.textContent = "¡Ya estás suscrito!"
            $description.textContent = "Recibirás una notificación cuando los resultados hayan sido publicados."
        }

        const publicKey = '<%= publicKey %>';

        if (!('serviceWorker' in navigator) && !('PushManager' in window)) {
            alert("Tu navegador no puede recibir notificaciones...")
        } 

        navigator.serviceWorker.register('/sw.js').then(function(swReg) {
            console.log('Service Worker is registered', swReg);

             $form.addEventListener("click", (e) => {
                e.preventDefault()
                if(alreadySubscribed){return;}
                subscribeUser(swReg);
             })
        
        });

        function subscribeUser(swReg) {
            const alreadySubscribed = localStorage.getItem("subscription")
            if(alreadySubscribed){
                $btn.classList.add("hide")
                $title.textContent = "¡Ya estás suscrito!"
                $description.textContent = "Recibirás una notificación cuando los resultados hayan sido publicados"
                return;
            }

            swReg.pushManager.subscribe({
                userVisibleOnly: true,
                applicationServerKey: urlBase64ToUint8Array(publicKey)
            }).then(function(subscription) { 
                fetch('/api/subscribe', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(subscription)
                });
                localStorage.setItem("subscription", JSON.stringify(subscription))
                $form.classList.add("hide")
            }).catch(function(err) {
                alert("Debes de permitir las notificaciones")
            });
        }

        function urlBase64ToUint8Array(base64String) {
            const padding = '='.repeat((4 - base64String.length % 4) % 4);
            const base64 = (base64String + padding)
                .replace(/\-/g, '+')
                .replace(/_/g, '/');

            const rawData = window.atob(base64);
            const outputArray = new Uint8Array(rawData.length);

            for (let i = 0; i < rawData.length; ++i) {
                outputArray[i] = rawData.charCodeAt(i);
            }
            return outputArray;
        }
   </script>

</body>
</html>