'use strict';

const applicationServerPublicKey = 'BE3l5rtX6nEzfiZTPUP6FjKe0JNposhxbMEuXuFv3PfbUvHbL3QzYLd-D7uq8MpVXQwvQIcnIi-5TYkW17BN-s4';
const pushAction = document.querySelector('.push-button');
const pushButton = document.querySelector('.push-action');
const pushCancel = document.querySelector('.push-cancel');
const pushPopup = document.querySelector('.push-popup');


let isSubscribed = false;
let swRegistration = null;

function urlB64ToUint8Array(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;
}

function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.style.display = 'none';
    //updateSubscriptionOnServer(null);
    return;
  }

  pushButton.style.display = 'block'


  if (isSubscribed) {
      pushButton.style.color = '#ffdb4d'
  } else {
      pushButton.style.color = '#cccccc'
      pushButton.className +=' off'
  }

}


function updateSubscriptionOnServer(subscription) {
  jQuery.post( "/push/token", JSON.stringify(subscription), function( data ) { }, "json");
}

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    updateSubscriptionOnServer(subscription);
    isSubscribed = true;
    updateBtn();

    subscribeBannerDisplayed()
  })
  .catch(function(err) {
    //console.log('Failed to subscribe the user: ', err);
    updateBtn();
  });
}



function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    //console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);
    isSubscribed = false;
    updateBtn();
  });
}

function initialiseUI() {
  pushButton.addEventListener('click', function() {

    pushPopup.style.display = 'none'

    if (isSubscribed) {
      unsubscribeUser();
    } else {
      subscribeUser();
    }



  });


  pushAction.addEventListener('click', function() {
        pushPopup.style.display = 'none'
           if (isSubscribed) {
             unsubscribeUser();
           } else {
             subscribeUser();
           }
  });



  pushCancel.addEventListener('click', function() {
      pushPopup.style.display = 'none'
      subscribeBannerDisplayed()
  });



  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    //updateSubscriptionOnServer(subscription);

    updateBtn();

    if( !isSubscribed && !subscribeBannerWasDisplayed()) displaySubscribePopup()

  });
}



if ('serviceWorker' in navigator && 'PushManager' in window) {

  navigator.serviceWorker.register('/js/push/sw.js?11')
  .then(function(swReg) {
    swRegistration = swReg;
    initialiseUI();
  })
  .catch(function(error) {
   pushButton.style.display = 'none'
  });
} else {
  pushButton.style.display = 'none'

}


function subscribeBannerWasDisplayed(){
    return localStorage.getItem('chrome_push_popup');
}

function subscribeBannerDisplayed(){
    localStorage.setItem('chrome_push_popup', true);
}

function displaySubscribePopup(){
    if (isSubscribed) {
        pushPopup.style.display = 'none'
    }else{
        pushPopup.style.display = 'block'
    }
}


//localStorage.removeItem('chrome_push_popup');