import { getWeatherByName, getWeatherForecast } from '../helpers.js';

const renderMajorCities = (onCityClick)=> {
    const europeanCapitals = ['London', 'Paris', 'Vienna'];
    const bulgarianCities = ['Varna', 'Plovdiv', 'Sofia'];

    europeanCapitals.forEach((city) => {
        renderEuropeanCapital(city, '#european-capitals', onCityClick);
    });
    bulgarianCities.forEach((city) => {
        renderBulgarianCities(city, '#bulgarian-cities', onCityClick);
    });
}

const renderEuropeanCapital = (cityName, selector, onCityClick) => {
    getWeatherByName(cityName)
        .then(renderMajorCity.bind(this, selector, onCityClick))
}

const renderBulgarianCities = (cityName, selector, onCityClick) => {
    getWeatherByName(cityName)
        .then(renderMajorCity.bind(this, selector, onCityClick))
}

const renderMajorCity = (selector, onCityClick, cityData) => {
    const cityName = cityData.location.name;
    const temp = cityData.current.temp_c;
    const icon = cityData.current.condition.text + '<img src="'
    + cityData.current.condition.icon+'"></img>';
    const domElement = $('<div class="city">'+
        '<div> <div class="city-name">'
        + cityName +
        '</div> <div class="temp">'+temp+'°C</div></div>'+'<div class="icon">'+icon+'</div>'+
        '</div>');
    $(selector).append(domElement);
    domElement.click(()=>{
        onCityClick(cityName);
    });
}
export {
    renderMajorCities
}