import { AbstractDashboardWidget } from './abstract-dashboard-widget.js';

export class DashboardWidgetOpenWeatherMap extends AbstractDashboardWidget {

    template = `
        <div class="weather-data">
            <div class="current-weather-container">
                <div class="current-weather">
                    <h1 class="temperature"><img class="weather-icon" src="" alt="Weather Icon"><span></span></h1>
                    <h4 class="description"></h4>
                </div>
            </div>
            <div class="additional-info-container">
                <div class="additional-info">
                    <label class="sunrise"></label><div class="sunrise"></div>
                    <label class="sunset"></label><div class="sunset"></div>
                    <label class="humidity"></label><div class="humidity"></div>
                    <label class="pressure"></label><div class="pressure"></div>
                    <label class="windspeed"></label><div class="windspeed"></div>
                    <label class="visibility"></label><div class="visibility"></div>
                </div>
            </div>
            <div class="forecasts-container">
                <div class="forecasts"></div>
            </div>
        </div>
    `;

    updateOptions(_options) {
        // no custom options from the server
    };

    updateData(data) {
        let currentWeather = this.querySelector('.current-weather');
        
        if (!currentWeather) {
            return;
        }
        
        currentWeather.querySelector('.weather-icon').src = `http://openweathermap.org/img/wn/${data.icon}@2x.png`;
        currentWeather.querySelector('.temperature span').textContent = data.temperature;
        currentWeather.querySelector('.description').textContent = data.description;

        let additionalInfo = this.querySelector('.additional-info');
        additionalInfo.querySelector('label.sunrise').textContent = data.sunrise.key;
        additionalInfo.querySelector('div.sunrise').textContent = data.sunrise.label;
        additionalInfo.querySelector('label.sunset').textContent = data.sunset.key;
        additionalInfo.querySelector('div.sunset').textContent = data.sunset.label;
        additionalInfo.querySelector('label.humidity').textContent = data.humidity.key;
        additionalInfo.querySelector('div.humidity').textContent = data.humidity.label;
        additionalInfo.querySelector('label.pressure').textContent = data.pressure.key;
        additionalInfo.querySelector('div.pressure').textContent = data.pressure.label;
        additionalInfo.querySelector('label.windspeed').textContent = data.windspeed.key;
        additionalInfo.querySelector('div.windspeed').textContent = data.windspeed.label;
        additionalInfo.querySelector('label.visibility').textContent = data.visibility.key;
        additionalInfo.querySelector('div.visibility').textContent = data.visibility.label;

        if (data.forecasts != undefined) {
            let forcastsContainer = this.querySelector('.forecasts');
            forcastsContainer.replaceChildren();
            data.forecasts.forEach(forecast => {
                let forecastElement = document.createElement('div');
                forecastElement.classList.add('forecast');

                let dateElement = document.createElement('div');
                dateElement.textContent = forecast.date;
                dateElement.classList.add('date');

                let iconElement = document.createElement('img');
                iconElement.classList.add('weather-icon');
                iconElement.src = `http://openweathermap.org/img/wn/${forecast.icon}@2x.png`;
                iconElement.setAttribute('title', forecast.description);

                let tempMinElement = document.createElement('div');
                tempMinElement.appendChild(document.createTextNode(forecast.temperaturemin));
                tempMinElement.classList.add('temperature');
                let tempMaxElement = document.createElement('div');
                tempMaxElement.appendChild(document.createTextNode(forecast.temperaturemax));
                tempMaxElement.classList.add('temperature');

                forecastElement.appendChild(dateElement);
                forecastElement.appendChild(iconElement);
                forecastElement.appendChild(tempMinElement);
                forecastElement.appendChild(tempMaxElement);
                forcastsContainer.appendChild(forecastElement);
            });
        }

    };
}
customElements.define('dashboard-widget-openweathermap', DashboardWidgetOpenWeatherMap);