let now = new Date();

function setTime(){
  let weekDays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
let hours = now.getHours();
if (hours < 10){
  hours = `0${hours}`;
}
let minutes = now.getMinutes();
if (minutes < 10){
  minutes = `0${minutes}`;
}
let day = weekDays[now.getDay()];
let changeHours = document.querySelector("#hourWeather");
changeHours.innerHTML = `${day} ${hours}:${minutes} `;
}
setTime();



function changeEmoji(){
let pmAm = document.querySelector("#emojiWeather");
if (now.getHours > 0 && now.getHours < 12) {
  pmAm.innerHTML = "a.m. ☀️";
} else {
  pmAm.innerHTML = "p.m. 🌑";
}
}
changeEmoji();

function getForecast(coordinates){
  let apiKey = "a43564c91a6c605aeb564c9ed02e3858";
  let apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${coordinates.lat}&lon=${coordinates.lon}&appid=${apiKey}&units=metric`;
axios.get(apiUrl).then(forecast);
}

function forecast(response){
  console.log(response.data);
  
let forecastDays = response.data.daily;

  let forecastRow = document.querySelector("#forecast");

 let forecastHTML = `<div class="row">`;

 forecastDays.forEach(function(forecastDay, index) {
  if(index > 0 && index < 5){
  forecastHTML = forecastHTML + 
  `
  <div class="col-3">
    <span class="changecolor"> ${formatDay
      (forecastDay.dt)}</span>
      <div class="emoji1"> <img 
      src="http://openweathermap.org/img/wn/${forecastDay.weather[0].icon}@2x.png"
      alt=""
      width="42">
      </div>
     <span class="temp1"> ${Math.round(forecastDay.temp.day)}°</span>
    </div>

  `;}
   });
forecastHTML = forecastHTML + `</div>`;
forecastRow.innerHTML = forecastHTML;
}

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

function city(event){
event.preventDefault();
  let typeForm = document.querySelector("#typeCity");
    let changeCity = document.querySelector("#changeCityName");
  changeCity.innerHTML = `${typeForm.value}`;

 
let apiKey = "556a821047e84576324b9a20ecb711e5";
let units = "metric";
let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${typeCity.value}&appid=${apiKey}&units=${units}`;
axios.get(apiUrl).then(weather);
}



function cityKyiv(){
    let changeCity = document.querySelector("#changeCityName");
    changeCity.innerHTML = "Kyiv";
 
let apiKey = "556a821047e84576324b9a20ecb711e5";
let units = "metric";
let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=Kyiv&appid=${apiKey}&units=${units}`;
axios.get(apiUrl).then(weather);
}

cityKyiv();
  let currentPlace = document.querySelector("form");
currentPlace.addEventListener("submit", city);

function weather(response){
 
let degrees = document.querySelector("#convertation");
let changeDegree = Math.round(response.data.main.temp);
degrees.innerHTML = `${changeDegree}`;
farenheit.classList.remove("active");
celcium.classList.add("active");

celcFar = response.data.main.temp;

 let humidity = document.querySelector("#changeHum");
let changeHumidity = Math.round(response.data.main.humidity);
 humidity.innerHTML = `${changeHumidity}%`;

 let wind = document.querySelector("#windSpeed");
 let changeWind = Math.round(response.data.wind.speed);
 wind.innerHTML = `${changeWind} mph`;

 let nameCity = document.querySelector("#changeCityName");
 let currentCity = response.data.name;
 nameCity.innerHTML = currentCity;

 let changeweatherIcon = document.querySelector("#weathIcon");
 changeweatherIcon.setAttribute("src", `http://openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`);

getForecast(response.data.coord);
}


function showPosition(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
let apiKey = "556a821047e84576324b9a20ecb711e5";
let units = "metric";
let apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=${units}`;

 axios.get(apiUrl).then(weather);

}



function showCelcius(event){
event.preventDefault();
  celcium.classList.add("active");
  farenheit.classList.remove("active");
let changeQuality = document.querySelector("#convertation");
changeQuality.innerHTML = Math.round(celcFar);
}

function showFarenheit(event){
  event.preventDefault();
  celcium.classList.remove("active");
  farenheit.classList.add("active");
  let changeQuality = document.querySelector("#convertation");
let currentFar = (celcFar * 9) / 5 + 32;
changeQuality.innerHTML = Math.round(currentFar);
}

let celcFar = null;

let currentCelc = document.querySelector("#celcium");
currentCelc.addEventListener("click", showCelcius);

let currentFar = document.querySelector("#farenheit");
currentFar.addEventListener("click", showFarenheit);

function currentPos(event){
  event.preventDefault();
navigator.geolocation.getCurrentPosition(showPosition);
}

let button = document.querySelector("button");
button.addEventListener("click", currentPos);