const query_currency = async (base) => {
  // Llama a la api para obtener los datos de conversion de divisa
  // guardando los datos en localstorage
  //
  // En caso que se vuelva a llamar esta funcion pidiendo la misma base
  // se va a evitar llamar a la api y se obtendran los datos desde localstorage

  const old = JSON.parse(localStorage.getItem('currency'))
  if (old != null && old.base === base) return old

  const data = await fetch(`https://home.danielcortes.xyz/currency?base=${base}`)
  const response = await data.json()

  localStorage.setItem('currency', JSON.stringify(response))

  return response
}


const currency = async (money, from, to) => {
  // Hace la transformacion de una divisa a otra
  // Adicionalmente lo formatea segun el locale del navegador
  const data = await query_currency(from)
  return (data.rates[to] * money).toLocaleString(undefined, {miminumFractionDigits: 2})
}

const fill_currencies = async () => {
  // Rellena los datos de los input select con las monedas
  // disponibles en la api
  //
  // Por default deja seleccionados para from el USD y para
  // to el CLP

  const data = await query_currency('USD')
  const from_select = document.getElementById('currency-from')
  const to_select = document.getElementById('currency-to')

  Object.keys(data.symbols).forEach(key => {
    const option = document.createElement('option');

    option.value = key
    option.innerHTML = `${key}`

    const from_option = option.cloneNode(true)
    const to_option = option.cloneNode(true)

    if(key === 'USD') {
      from_option.selected = 'selected'
    }

    if(key === 'CLP') {
      to_option.selected = 'selected'
    }

    from_select.appendChild(from_option)
    to_select.appendChild(to_option)
  })
}

const show_currency = async () => {
  // Muestra los datos del cambio de divisa con los datos
  // que ingreso el usuario en los campos correspondientes
  //
  // eso de la validacion no existe aqui :3, es para nenas

  const money = document.getElementById('currency-money').value

  const from_select = document.getElementById('currency-from')
  const to_select = document.getElementById('currency-to')

  const from = from_select.options[from_select.selectedIndex].value
  const to = to_select.options[to_select.selectedIndex].value

  const result = await currency(money, from, to)

  document.getElementById('currency-result').innerHTML = `${result}` 
}


const on_load = async () => {
  // Cuando se carge la pagina se asignaran los event listeners
  // necesarios para su funcionamiento y se ejecutaran funciones 
  // que rellenen datos 

  document.getElementById('update-currency').addEventListener('click', show_currency)
  fill_currencies().then(() => show_currency())
}

window.addEventListener('load', on_load)