// ===============================
// OpenWeatherMap API Key
// ===============================

const API_KEY = "964e9dfe1859882e0b32789a02ce9979";

// ===============================
// Elements
// ===============================

const cityInput = document.getElementById("city");
const searchBtn = document.getElementById("searchBtn");

const loading = document.getElementById("loading");
const weatherCard = document.getElementById("weatherCard");

const cityName = document.getElementById("cityName");
const date = document.getElementById("date");
const temp = document.getElementById("temp");
const condition = document.getElementById("condition");
const wind = document.getElementById("wind");
const humidity = document.getElementById("humidity");
const pressure = document.getElementById("pressure");
const visibility = document.getElementById("visibility");
const weatherIcon = document.getElementById("weatherIcon");

const rain = document.getElementById("rain");
const clouds = document.getElementById("clouds");
const sunshine = document.getElementById("sunshine");

// ===============================
// Search Weather
// ===============================

searchBtn.addEventListener("click", getWeather);

cityInput.addEventListener("keypress", function(e){

    if(e.key==="Enter"){
        getWeather();
    }

});

// ===============================

async function getWeather(){

    const city = cityInput.value.trim();

    if(city===""){
        alert("Please enter a city or country name.");
        return;
    }

    loading.classList.remove("hidden");
    weatherCard.classList.add("hidden");

    removeEffects();

    try{

        const response = await fetch(

`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`

        );

        if(!response.ok){

            throw new Error("City Not Found");

        }

        const data = await response.json();

        setTimeout(()=>{

            loading.classList.add("hidden");

            weatherCard.classList.remove("hidden");

            displayWeather(data);

        },1200);

    }

    catch(error){

        loading.classList.add("hidden");

        alert("City or Country not found.");

    }

}

// ===============================

function displayWeather(data){

    cityName.innerHTML =
    data.name+", "+data.sys.country;

    date.innerHTML =
    new Date().toDateString();

    temp.innerHTML =
    Math.round(data.main.temp)+"°C";

    condition.innerHTML =
    data.weather[0].main;

    wind.innerHTML =
    data.wind.speed+" km/h";

    humidity.innerHTML =
    data.main.humidity+" %";

    pressure.innerHTML =
    data.main.pressure+" hPa";

    visibility.innerHTML =
    (data.visibility/1000).toFixed(1)+" km";

    weatherIcon.src=
`https://openweathermap.org/img/wn/${data.weather[0].icon}@4x.png`;

    weatherAnimation(data.weather[0].main);

}

// ===============================

function weatherAnimation(weather){

    removeEffects();

    weather = weather.toLowerCase();

    // Rain

    if(weather.includes("rain") || weather.includes("drizzle")){

        document.body.className="rain";

        rain.style.display="block";

        for(let i=0;i<180;i++){

            let drop=document.createElement("div");

            drop.classList.add("drop");

            drop.style.left=Math.random()*100+"%";

            drop.style.animationDuration=
            .5+Math.random()+"s";

            drop.style.opacity=Math.random();

            rain.appendChild(drop);

        }

    }

    // Clouds

    else if(weather.includes("cloud")){

        document.body.className="clouds";

        clouds.style.display="block";

        for(let i=0;i<8;i++){

            let cloud=document.createElement("div");

            cloud.classList.add("cloud");

            cloud.style.top=Math.random()*80+"%";

            cloud.style.animationDuration=
            25+Math.random()*20+"s";

            cloud.style.animationDelay=
            Math.random()*10+"s";

            clouds.appendChild(cloud);

        }

    }

    // Snow

    else if(weather.includes("snow")){

        document.body.className="snow";

    }

    // Thunderstorm

    else if(weather.includes("thunder")){

        document.body.className="thunder";

    }

    // Clear

    else{

        document.body.className="clear";

        sunshine.style.display="block";

    }

}

// ===============================

function removeEffects(){

    rain.innerHTML="";

    clouds.innerHTML="";

    rain.style.display="none";

    clouds.style.display="none";

    sunshine.style.display="none";

    document.body.className="";

}

// ===============================
// Default Weather
// ===============================

window.onload=function(){

    cityInput.value="London";

    getWeather();

}