const currency = new function() {
  this.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
  }

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

  this.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 this.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)
    })
  }

  this.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 this.convert(money, from, to)

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

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

const photos = new function() {
  this.msnry = null;
  this.imgs = [];
  this.current_photos = null;
  this.current_page = 1;

  this.query_photos = async (page) => {
    // Llama a la api para obtener una lista de imagenes
    // guardando los datos en localstorage para cache
    //
    // En caso que se vuelva a llamar esta funcion pidiendo la misma pagina
    // se va a evitar llamar a la api y se obtendran los datos desde la variable
    // que la tiene almacenada o localstorage 

    if (this.current_photos !== null && this.current_photos.page === page) 
      return this.currrent_photos 

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

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

    this.current_photos = response
    localStorage.setItem('page', JSON.stringify(response))

    return this.current_photos; 
  }

  this.set_as_background = async (url) => {
    document.querySelector('.container').style.backgroundImage= `url(${url})`
    localStorage.setItem('background', url)
  }

  this.clear_photos = async () => {
    this.imgs.forEach(img => {
      this.msnry.remove(img)
    })
    this.msnry.layout()
    this.imgs = []
  }

  this.wait_for_load = () => {
    return Promise.all(Array.from(document.images)
      .filter(img => !img.complete)
      .map(img => new Promise(resolve => { 
        img.onload = img.onerror = resolve; 
      })))
  }

  this.fill_photos = async () => {
    const photos = await this.query_photos(this.current_page)
    const photos_div = document.getElementById('photos-div')
    const photos_page = document.getElementById('photos-page')
    const fragment = document.createDocumentFragment()

    photos.results.forEach((photo) => {
      const img = document.createElement('img')
      img.src = photo.urls.small
      img.alt = photo.alt
      img.addEventListener('click', () => this.set_as_background(photo.urls.full))

      fragment.appendChild(img)
      this.imgs.push(img)
    })

    photos_page.innerHTML = this.current_page;

    photos_div.appendChild(fragment)
    await this.wait_for_load()

    this.msnry.appended(this.imgs)
    this.msnry.layout()
  }

  this.next_page = async () => {
      this.current_page++
      await this.clear_photos()
      await this.fill_photos()
  }

  this.previous_page = async () => {
    if(this.current_page - 1 >= 1) {
      this.current_page--
      await this.clear_photos()
      await this.fill_photos()
    }
  }

  this.on_load = async () => {
    const previous_background = localStorage.getItem('background')
    if(previous_background !== null) this.set_as_background(previous_background)

    this.msnry = new Masonry( '.photos', {
      itemSelector: 'img',
      percentPosition: true,
      gutter: 10,
    });

    await this.fill_photos()

    document.getElementById('photos-next').addEventListener('click', this.next_page);
    document.getElementById('photos-prev').addEventListener('click', this.previous_page);
  }
}

const search = new function () {
  this.search_bar = document.getElementById('search-input')

  this.submit_search = (query) => {
    const encoded = encodeURIComponent(query)
    window.location.href = `https://www.duckduckgo.com/?q=${encoded}`
  }

  this.on_load = () => {
    this.search_bar.addEventListener('keydown', (e) => {
      if(e.key === 'Enter' && this.search_bar.value.length !== 0) 
        this.submit_search(this.search_bar.value)
    })
  }
}

const weather = new function () {
  
}

window.addEventListener('load', () => {
  currency.on_load()
  photos.on_load()
  search.on_load()
});