function attachEvents() {
    let submitBtn = document.getElementById("submit");
    submitBtn.addEventListener("click", getLocationId);

    let locationInput = document.getElementById("location");


    let locationObj = {};

    let forecastDiv = document.getElementById("forecast");

    let currentWeatherDiv = document.getElementById("current");
    let upcomingWeatherDiv = document.getElementById("upcoming");

    var requestOptions = {
        method: 'GET',
        redirect: 'follow'
    };

    function getLocationId() {
        let loc = locationInput.value;
        wipeDivs("forecasts");
        wipeDivs("forecast-info")

        fetch("http://localhost:3030/jsonstore/forecaster/locations", requestOptions)
            .then(response => response.text())
            .then(r => JSON.parse(r))
            .then(r => locationObj = r.find(l => l.name == loc))
            .then(r => today(locationObj))
            .then(r => forecoming(locationObj))

            .catch(error => invalidData());

    }

    function today(locationObj) {
        forecastDiv.style.display = "block";
        console.log(locationObj.name)


        fetch(`http://localhost:3030/jsonstore/forecaster/today/${locationObj.code}`, requestOptions)
            .then(response => response.text())
            .then(result => JSON.parse(result))
            .then(r => populateToday(r))
            .catch(error => invalidData());

    }

    function forecoming(locationObj) {


        fetch(`http://localhost:3030/jsonstore/forecaster/upcoming/${locationObj.code}`, requestOptions)
            .then(response => response.text())
            .then(result => JSON.parse(result))
            .then(r => populateUpcoming(r))
            .catch(error => invalidData());
    }

    function populateToday(obj) {
  
        console.log(obj);
        let wrapperDiv = document.createElement("div");
        wrapperDiv.className = "forecasts";
        let symbSpan = document.createElement("span");
        symbSpan.className = "condition symbol"
        symbSpan.textContent = chooseSymbol(obj.forecast.condition);

        conditionSpan = document.createElement("span");
        conditionSpan.className = "condition";
        let placeSpan = document.createElement("span");
        placeSpan.className = "forecast-data";
        placeSpan.textContent = obj.name;

        let tempSpan = document.createElement("span");
        tempSpan.className = "forecast-data";
        tempSpan.textContent = `${obj.forecast.high}°/${obj.forecast.low}°`;

        let typeSpan = document.createElement("span");
        typeSpan.className = "forecast-data";
        typeSpan.textContent = `${obj.forecast.condition}`;

        conditionSpan.appendChild(placeSpan);
        conditionSpan.appendChild(tempSpan);
        conditionSpan.appendChild(typeSpan)

        wrapperDiv.appendChild(symbSpan);
        wrapperDiv.appendChild(conditionSpan);
        currentWeatherDiv.appendChild(wrapperDiv)
    }


    function populateUpcoming(obj) {
        let arr = obj.forecast;
        console.log(arr)
        let wrapperDiv = document.createElement("div");
        wrapperDiv.className = "forecast-info";

        arr.forEach(d => {                    

            let upcomingSpan=document.createElement("span");
            upcomingSpan.className="upcoming";
            let symbSpan = document.createElement("span");
            symbSpan.className = "condition symbol";
            symbSpan.textContent = chooseSymbol(d.condition);


            let tempSpan = document.createElement("span");
            tempSpan.className = "forecast-data";
            tempSpan.textContent = `${d.high}°/${d.low}°`;

            conditionSpan = document.createElement("span");
            conditionSpan.className = "condition";
            conditionSpan.textContent = d.condition;


            upcomingSpan.appendChild(symbSpan);
            upcomingSpan.appendChild(tempSpan);
            upcomingSpan.appendChild(conditionSpan);
            wrapperDiv.appendChild(upcomingSpan)
          
        })

        upcomingWeatherDiv.appendChild(wrapperDiv);

    }

    function chooseSymbol(str) {
        let symb = "";

        switch (str) {
            case "Sunny": symb = "☀"; break;
            case "Partly sunny": symb = "⛅"; break;
            case "Overcast": symb = "☁"; break;
            case "Rain": symb = "☂"; break;

        }
        return symb;
    }

    function invalidData(){
     let erDiv=document.createElement("div");     
     erDiv.className="forecasts";
     erDiv.textContent="Error";
     currentWeatherDiv.appendChild(erDiv)
    }

    function wipeDivs(divsClassName){
        let divsToWipe=Array.from(document.getElementsByClassName(divsClassName));
        divsToWipe.forEach(d=>d.remove())
    }
}

attachEvents();