// ------------------------
// Typewriter effect
// ------------------------

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["Optimized on-chain trade", "Escrow for anything", "Flexible Trading"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
  	setTimeout(erase, newTextDelay);
  }
}

function erase() {
	if (charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});

// -- End -- //


// ------------------------
    // Button loading
// ------------------------

const setButtonLoading = (elem) => {

  $(elem).html('<i class="fa fa-spinner fa-spin" style="color: inherit;"></i>');
  $(elem).attr('disabled', true);
  $(elem).css('opacity', 0.7);

}
const clearButtonLoading = (elem, title) => {
  $(elem).html(title);
  $(elem).attr('disabled', false);
  $(elem).css('opacity', 1);
}


// ---------------------
// password toggle
function passwordViewToggle(){
  var passwordInput = $('#id_password')[0];
  if (passwordInput.type == 'text'){
      passwordInput.type = 'password'
      $('.p-t-st').removeClass('bi-eye'); $('.p-t-st').addClass('bi-eye-slash'); 
  }
  else{
      passwordInput.type = 'text';
      $('.p-t-st').removeClass('bi-eye-slash'); $('.p-t-st').addClass('bi-eye');
  }
}


// ----------------
//   Side nav
// ----------------

function openSideBarSm(){
  $('#overlayDiv').show()
  $('#sideBarSm').show('slide', {direction: 'right'}, 200)
}

function hideSideBarSm(){
  $('#overlayDiv').hide()
  $('#sideBarSm').hide('slide', {direction: 'right'}, 200)
}


// -------------------------------------------
// Process wallet and wallet balance
// -------------------------------------------

const handleProcessWalletData = ({wallet, isWalletView}) => {
  const __SYMBOLS = wallet.map(item => item.symbol);
  const __JOIN_SYMBOLS = __SYMBOLS.join(',');

  const coinApiRequest = async () => { // fetch coin rates from api
      try{
        const request = $.get(`https://min-api.cryptocompare.com/data/pricemulti?fsyms=${__JOIN_SYMBOLS}&tsyms=USD&api_key=ebb16afd8ddf115bac1f81db496869ea431cd7426b392bea181f034f3dfcd0ce`,
            function (data, textStatus, jqXHR) {
                ls.set('usdRates', data, { ttl: 10 * 60 });
                calculateWalletBalanceToUSD(data);
            },
            "json"
        );
      }
      catch(err){
        return;
      }
  }

  const calculateWalletBalanceToUSD = async (usdRates) => { // Create new list of wallet with usd rates
      const walletWithUsdRate = wallet.map(item => {
        return {
            symbol: item.symbol, 
            name: item.name, 
            balance: item.balance, 
            marketRate: usdRates[item.symbol.toUpperCase()] ? item.balance * usdRates[item.symbol.toUpperCase()]['USD'] : '-.--', 
            image_link: item.image_link, 
            id: item.id, 
            locked_amount: item.locked_amount,
            price: usdRates[item.symbol.toUpperCase()] ? usdRates[item.symbol.toUpperCase()]['USD'] : null
        }
      });

      // estimate total
      if (walletWithUsdRate?.length > 0) {
          const sum = walletWithUsdRate.reduce((accumulator, { marketRate = 0 }) => accumulator + marketRate, 0);
          const x_sum = formatNumberDecimalPlace(sum, 5);
          $('.est-total-bal').html(x_sum > 0 ? parseFloat(x_sum).toLocaleString() : x_sum)
      }

      // send to wallet list
      fillDbWallet(walletWithUsdRate, isWalletView)
  }

  if (wallet.length > 0){ // First run
      try {
        const rateStore = ls.get('usdRates');
        if (rateStore !== null){
            calculateWalletBalanceToUSD(rateStore);
        }
        else coinApiRequest();
      } 
      catch (e) {
        return;
      }
  }
}

function fillDbWallet (walletList, isWalletView) {

  const sortedWalletList = walletList.sort((a, b) => {
    const balanceA = parseFloat(a.marketRate);
    const balanceB = parseFloat(b.marketRate);
  
    const isNaNA = isNaN(balanceA);
    const isNaNB = isNaN(balanceB);
  
    if (isNaNA && isNaNB) return 0;       
    if (isNaNA) return 1;                
    if (isNaNB) return -1;           
  
    return balanceB - balanceA;
  });

  const list = !isWalletView ? sortedWalletList.slice(0, 4) : sortedWalletList

  $('.wallet-table').html('');
  list.forEach(item => {
    $('.wallet-table').append(
      `
      <tr>
        <td class="d-flex align-items-center">
          <img 
            src="${item.image_link}" style="width: 24px; height: 24px" 
            onerror="this.src='https://cdn-icons-png.flaticon.com/512/566/566295.png'" 
          />
          <div class="ml-2">
            <p class="m-0 uppercase">${item.symbol}</p>
            <p class="m-0 grey-color capitalize">${item.name}</p>
          </div>
        </td>
        <td>
          <div>
            <p class="m-0 uppercase text-sm">
              ${parseFloat(formatNumberDecimalPlace(item.balance, 3).toLocaleString())}
            </p>
            <p class="m-0 grey-color capitalize text-xs">
              $${
                isNaN(parseFloat(formatNumberDecimalPlace(item.marketRate, 3))) ? '--.--' : parseFloat(formatNumberDecimalPlace(item.marketRate, 3)).toLocaleString()
              }
            </p>
          </div>
        </td>
    </tr>
      `
    )
  })
}



// ---------------------------
//   Show toast
// ---------------------------
const showNotification = ({message, tag}={}) => {
  const getBackground = () => {
    if (tag == "success") return "linear-gradient(to right, #00b09b, #96c93d)";
    else if (tag == "error") return "linear-gradient(to right, #f20f31, #f52a5c)";
    else if (tag == "info") return "linear-gradient(to right, #f2e30f, #c7bf49)";
    else return 'none'
  }
    Toastify({
        text: message,
        duration: 4000,
        destination: null,
        close: true,
        gravity: "top",
        position: "right",
        stopOnFocus: true,
        style: {
          background: getBackground(),
        },
        className: "gabarito d-flex align-items-center",
        onClick: function(){} // Callback after click
    }).showToast();
}