const head = document.getElementsByTagName('HEAD')[0];
const link = document.createElement('link');
const payUrl = 'https://atidium.io/pay/pay.php';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://dapp.atidium.io/static/pay/assets/style.css?v=' + (new Date().getMilliseconds());
head.appendChild(link);

function initAtdPay() {
  let atdPay = document.getElementById('atdPay');
  atdPay.innerHTML = '<div id="atdPayBtn"></div><div id="atdPayPop"><div id="atdPayPopForm"><span id="atdPayPopClose">&times;</span><h3>Atidium Pay</h3><h4>No forms. No fees. No delays.</h4><label id="atdDetails"></label><input type="text" id="atdPayToken" placeholder="Paste your Token"><button id="atdPaySend">Confirm&nbsp;<i id="atdDots"></i></button></div></div>';
  const atdBtn = document.getElementById('atdPayBtn');
  const atdDetails = document.getElementById('atdDetails');
  const atdPop = document.getElementById('atdPayPop');
  const atdPopClose = document.getElementById('atdPayPopClose');
  const atdBtnSend = document.getElementById('atdPaySend');
  const atdPayToken = document.getElementById('atdPayToken');
  const atdBtnSendDots = document.getElementById('atdDots');
  const atdAmount = parseFloat(atdPay.getAttribute('data-amount'))
    .toFixed(4);
  const atdAccount = atdPay.getAttribute('data-account');
  const atdCurrency = atdPay.getAttribute('data-currency');
  const businessEmail = atdPay.getAttribute('data-email');
  var dotCount = 0,
    dotCounter = null;
  atdDetails.innerHTML += 'Pay ' + atdAmount + ' ' + atdCurrency + ' to ' + atdAccount;

  atdBtn.addEventListener('click', () => {
    atdPop.classList.add('atd-pop-show');
  });
  atdPopClose.addEventListener('click', () => {
    atdPop.classList.remove('atd-pop-show');
  });
  atdBtnSend.addEventListener('click', () => {
    if (atdPayToken.value !== '') {
      dotCounter = setInterval(dots, 750);
      atdBtnSend.disabled = true;
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
          try {
            let res = JSON.parse(this.responseText);
            //console.log(res);
            /*
            "Error 3050003: eosio_assert_message assertion failure
            Error Details:
            assertion failure with message: Could not find token!
            pending console output: 
            "
             */
            if (res.message.includes('Error')) {
              let err = res.message.substring(res.message.indexOf('Error Details:'), res.message.indexOf('pending console output:'));
              //console.log(err);
              alert(err);
              atdBtnSend.disabled = false;
              clearInterval(dotCounter);
            } else {
              alert('Thank you! The business owner will be notified about your payment.');
            }
            atdPop.classList.remove('atd-pop-show');
          } catch (e) {
            alert('We have a problem understanding the response.');
            atdBtnSend.disabled = false;
            clearInterval(dotCounter);
          }
        }
      };
      xhr.open('POST', payUrl, true);
      //   xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify({
        token: atdPayToken.value.trim(),
        amount: atdAmount + ' ' + atdCurrency,
        domain: window.location.hostname.replace('www.', '')
          .trim(),
        recipient: atdAccount.trim(),
        email: businessEmail.trim()
      }));
    }
  });

  function dots() {
    var dotText = '';
    dotCount = ++dotCount % 4;
    for (var i = 0; i < dotCount; i++) dotText += '.';
    for (var i = dotCount; i < 4; i++) dotText += '&nbsp;';
    atdBtnSendDots.innerHTML = dotText;
  }
}

if (window.attachEvent) {
  window.attachEvent('onload', initAtdPay);
} else {
  window.onload = initAtdPay;
}