/* Initialize app when page loads */
$(function(){ 
    if(App.cable.subscriptions.subscriptions.length > 0) {
        if(App.cable.subscriptions.subscriptions[0].identifier.includes("MessagesChannel")) {
            return
        }
    }
    var Messages = App.cable.subscriptions.create({
      channel:'MessagesChannel',
      conversation_id: connectionID()
    }, {
      received: function(data) {
        if(data.type == "info") {
            if(data.status == "completed") {
                console.log("info request");
                window.location.replace("/");
            } else {
                message = "Fact request has been rejected"
                if(data.status == "errored") {
                    message = data.message
                }
                // TODO: this id no longer exists...
                document.querySelector('#info_messages').insertAdjacentHTML(
                    'afterbegin',
                    `<div class='alert alert-danger'>
                        <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                        ${message}
                    </div>`
                  )                
            }
        } else {
            $("#messages").removeClass('hidden');
            if(data.status == "accepted") {
              // Just display the 
              $('#process').removeClass("hidden");
              $('#non-dl-container').addClass("hidden");
              $('#dl-container').addClass("hidden");

                // Login request accepted
              $("#req-auth .activity-icon").addClass("bg-success")
              $("#req-auth .activity-icon").addClass("shadow-success")
              $("#req-auth .activity-icon").removeClass("bg-info")
              $("#req-auth .activity-icon").removeClass("shadow-info")

              $("#req-info .activity-icon").removeClass("bg-secondary")
              $("#req-info .activity-icon").removeClass("shadow-secondary")
              $("#req-info .activity-icon").addClass("bg-info")
              $("#req-info .activity-icon").addClass("shadow-info")

              $("#req-auth .waiting").addClass("hidden")
              $("#req-auth .passed").removeClass("hidden")
              $("#req-info .waiting").removeClass("hidden")

            } else if(data.status == "completed") {
              $("#auth-ok").hide()

              $("#req-info .activity-icon").addClass("bg-success")
              $("#req-info .activity-icon").addClass("shadow-success")
              $("#req-info .activity-icon").removeClass("bg-info")
              $("#req-info .activity-icon").removeClass("shadow-info")

              $("#req-info .waiting").addClass("hidden")
              $("#req-info .passed").removeClass("hidden")
              $(".logging-in").removeClass("hidden")
              $(".btn-cancel").addClass("hidden")

              setTimeout(() => {
                // Fetched user information
                $("#login-token")[0].value = data.token;
                $("#form-login").off("submit")
                $("#form-login")[0].submit();
              }, 2000);
  
            } else {

              message = "Login request has been rejected"
              if(data.status == "errored") {
                message = data.message
              }
              document.querySelector('#info_messages').insertAdjacentHTML(
                'afterbegin',
                `<div class="alert alert-warning alert-dismissible show fade"><div class="alert-body"><button class="close" data-dismiss="alert"><span>×</span></button>${message}</div></div>`
              )                

              $('#info_messages').show();
              $('#process').addClass("hidden");
              $('#non-dl-container').removeClass("hidden");

              $("#req-auth .activity-icon").addClass("bg-info")
              $("#req-auth .activity-icon").addClass("shadow-info")
              $("#req-auth .activity-icon").removeClass("bg-success")
              $("#req-auth .activity-icon").removeClass("shadow-success")

              $("#req-info .activity-icon").removeClass("bg-info")
              $("#req-info .activity-icon").removeClass("shadow-info")
              $("#req-info .activity-icon").addClass("bg-secondary")
              $("#req-info .activity-icon").addClass("shadow-secondary")
            }
        }
      }
    });    
 });