function refreshWeather(response){
    let temperatureElement = document.querySelector("#temperature");
    let temperature = response.data.temperature.current;
    let cityElement = document.querySelector("#city");
    let descriptionElement = document.querySelector("#description");
    let humidityElement = document.querySelector("#humidity");
    let windSpeedElement = document.querySelector("#wind-speed");
    let timeElement = document.querySelector("#time");
    let date = new Date(response.data.time * 1000);
    
    let iconElement = document.querySelector("#icon");
    
    icon.innerHTML = `<img src="${response.data.condition.icon_url}" class="weather-app-icon"/>`;
    cityElement.innerHTML = response.data.city;
    descriptionElement.innerHTML = response.data.condition.description;
    temperatureElement.innerHTML = Math.round(temperature);
    humidityElement.innerHTML = `${response.data.temperature.humidity}%`;
    windSpeedElement.innerHTML = `${response.data.wind.speed} Mph`;
    timeElement.innerHTML = formatDate(date);

getForecast(response.data.city);

}

function formatDate(date) {
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let days = ["Sunday",
     "Monday", 
     "Tuesday", 
     "Wednesday", 
     "Thursday", 
     "Friday", 
     "Saturday"];

     let day = days[date.getDay()];

     if (minutes < 10){
        minutes = `0${minutes}`;
     }

     return `${day} ${hours}:${minutes}`;
}

function searchCity (city) {
    let apiKey = "fbo8bf469f346aa6dt3f56791b049240";
    let apiUrl = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}&units=imperial`;
    axios.get(apiUrl).then(refreshWeather)


}

function handleSearchSubmit(event) {
    event.preventDefault();
    let searchInput = document.querySelector("#search-form-input");
    
    searchCity(searchInput.value);
}

let searchFormElement = document.querySelector("#search-form");
searchFormElement.addEventListener("submit", handleSearchSubmit);

searchCity("Chicago");

function formateDay(timestamp){
    let date = new Date(timestamp * 1000);
    let days = ["sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    return days[date.getDay()];

}


function getForecast (city){
    let apiKey = "fbo8bf469f346aa6dt3f56791b049240";
    let apiUrl = `https://api.shecodes.io/weather/v1/forecast?query=${city}&key=${apiKey}&units=imperial`;
    
    axios(apiUrl).then(displayForecast);;
}


function displayForecast(response){
console.log(response.data);


let days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
let forecastHtml = "";

response.data.daily.forEach(function (day, index) {
    if (index < 5){
forecastHtml = 
forecastHtml + 
`
<div class="weather-forecast-day">
  <div class="weather-forecast-date">${formateDay(day.time)}</div>
  <img src="${day.condition.icon_url}" class="weather-forecast-icon"/>
  <div class="weather-forecast-temperatures">
    <span class="weather-forecast-temperature-max">
      <strong>${Math.round(day.temperature.maximum)}º</strong>
    </span>
    <span class="weather-forecast-temperature-min"> ${Math.round(day.temperature.minimum)}º</span>
  </div>
</div>`;
    }
   });
   let forecastElement = document.querySelector("#forecast");
   forecastElement.innerHTML = forecastHtml;
}