// Api klíč naleznete na https://home.openweathermap.org/api_keys
const API_KLIC = "f70d944f638a7ae77de89435d4d23c01"

async function zjistiPocasi() {
    let mesto = document.getElementById("mestoInput").value.trim();
    if (mesto == ""){
        document.getElementById("chyba").textContent = "Zadej název města!"
        return
    }
    document.getElementById("chyba").textContent = "";
    document.getElementById("vysledek").innerHTML = "<p>Načítám....</p>";
    try {
        await fetchPocasi(mesto);
    } catch (error) {
        document.getElementById("chyba").textContent = error.message;
        document.getElementById("vysledek").innerHTML = "";
    }
}

async function fetchPocasi(mesto) {
    let url = "https://api.openweathermap.org/data/2.5/weather"
                + "?q=" + mesto
                + "&appid=" + API_KLIC
                + "&units=metric"
                + "&lang=cz";
    let response = await fetch(url);
    if (!response.ok) {
        throw new Error("Město nenalezno! Zkontroluj název");
    }
    let data = await response.json();
    console.log(data)
    zobrazPocasi(data);
}

function zobrazPocasi(data) {
    let vysledek = document.getElementById("vysledek");
    let ikonaURL = "https://openweathermap.org/img/wn/"
    + data.weather[0].icon + "@2x.png";
    vysledek.innerHTML = `
    <h2> ${data.name}, ${data.sys.country} </h2>
    <img src="${ikonaURL}">
    <p>Pocasi: ${data.weather[0].description}</p>
    <p>Teplota: ${data.main.temp}°C</p>
    <p>Pocitová Teplota: ${Math.round(data.main.feels_like)}°C</p>
    <p>Vlhkost: ${data.main.humidity}%</p>
    <p>Vítr: ${data.wind.speed} m/s</p>
    `;

}
document.getElementById("btnHledej").addEventListener("click",zjistiPocasi);
document.getElementById("mestoInput").addEventListener("keypress",function(e){
    if(e.key === "Enter"){
        zjistiPocasi();
    }
});