const input = document.getElementById('amount');
const resultSpan = document.getElementById('result');
const diffSpan = document.getElementById('diff');
const select = document.getElementById('currency');
let currency ='';
let amount = '';
let error = false;
let prevAmount = '';
let timer;
const fetchResponse=async()=>{
  if(currency && amount){
    clearTimeout(timer);
    timer = setTimeout(()=>{
      fetchResponse();
    },10000);
    const url  = `https://api.frontendeval.com/fake/crypto/${currency}`;
   try{
     const response = await fetch(url);
     const result = await response.json();
     error = false;
     const {value} = result;
     const calculatedResult = amount/value;
     insertIntoDom(calculatedResult);
   }catch(error){
     error =true;
     
   }
  }
}

function debounce(fn,delay=100){
  let timerOne;
  return function(...args){
    if(timerOne){
      clearTimeout(timerOne);
    }
    timerOne = setTimeout(()=>{
      fn(args)
    },delay);
  }
}

const debounceFn = debounce(fetchResponse,100);

function insertIntoDom(calculated){
  resultSpan.textContent = calculated.toFixed(2);
  if(prevAmount!==''){
    let diffString ='';
    const diff = (calculated - prevAmount).toFixed(2);
    diffString = diff>=0?`↑ ${diff}`:` ↓ ${Math.abs(diff)}`;
    prevAmount = calculated;
    diffSpan.innerHTML = diffString;
    diffSpan.className=diff>=0?'green':'red';
  }else{
    prevAmount = calculated;
  }
}

input.addEventListener('change',()=>{
  const value = input.value;
  input.value = `ji`
  // amount = Number(value);
  // debounceFn();
});

select.addEventListener('change',()=>{
  currency = select.value;
  debounceFn();
});