var selects = document.querySelector('.selects');
var weatherDiv = document.querySelector('.weather');

function get(url){
  return new Promise(function(resolve,reject){
    var xhr = new XMLHttpRequest();
    xhr.open('GET',url,true);
    xhr.onload = function(){
      if(xhr.status == 200){
        resolve(JSON.parse(xhr.responseText));
      }
      else{
        reject(xhr.statusText);
      }
    }
    xhr.onerror = function(){
      reject('not found');
    }
    xhr.send();
  });
}
function show(obj){
  var weather = obj.query.results.channel.item.description;
  var resWeather = weather.replace(/href|CDATA|[\!]|[\[]|[\]]/g,"");
  var resWeather2 = resWeather.slice(1,resWeather.length - 1);
  var resWeather3 = resWeather2.replace(/Full Forecast at Yahoo Weather/g,"");
  var resWeather4 = resWeather3.slice(0,resWeather3.length - 28);
  weatherDiv.innerHTML = resWeather4;
}
get('https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json').then(function(object){
  var keys = Object.keys(object);
  var select = document.createElement("select");
  for (var i = 0; i < keys.length; i++) {
      var option = document.createElement("option");
      option.innerHTML = keys[i];
      option.value = keys[i];
      select.appendChild(option);
  }

  select.onchange = function(e){
      console.log(this.value)
      console.log(document.getElementById("main").value)
      var select = document.createElement("select");
      for (var i = 0; i < object[this.value].length; i++) {
          var option = document.createElement("option")
          option.innerHTML = object[this.value][i];
          select.appendChild(option);
      }
      if(selects.children.length > 1){
          selects.replaceChild(select, document.getElementById("main").nextElementSibling);
      }
      else
          selects.appendChild(select);
        get("https://query.yahooapis.com/v1/public/yql?" + 'q=' + encodeURIComponent("select * from weather.forecast where woeid in (select woeid from geo.places(1) where text=\'" + select.value + "\') and u='c'") + '&format=json').then(function(obj){
        show(obj);
      }).catch(function(){
        weatherDiv.setAttribute("heigt", "400px")
        weatherDiv.innerHTML = "loading...";
      });
      select.onchange = function(){
        get("https://query.yahooapis.com/v1/public/yql?" + 'q=' + encodeURIComponent("select * from weather.forecast where woeid in (select woeid from geo.places(1) where text=\'" + this.value + "\') and u='c'") + '&format=json').then(function(obj){
          show(obj);
        })
      }
  }
  selects.appendChild(select);
  select.id = "main"
}).catch(function(error){
  console.log(error);
})