import { MapProvider } from '../maps/create-map.js';
import { UsersManager } from '../kinvey/users.js';
import { WeatherProvider } from '../weather/get-weather.js';

import { ProfileScreen } from '../profile/profileScreen.js';
import { TemplatesProvider } from '../kinvey/templates.js';

import { geolocation } from '../maps/get-geolocation.js';

const WeatherApp = (() => {
    let users,
        weather,
        maps,
        templates,
        profileScreen;

    class WeatherApp {
        constructor(contentContainerId) {
            maps = new MapProvider();
            users = new UsersManager();
            weather = new WeatherProvider();
            templates = new TemplatesProvider();
            profileScreen = new ProfileScreen();

            this._contentContainer = $(contentContainerId);
            this.__app__ = this.__initializeSammyApp__();
        }

        start() {
            this.__app__.run('#/');
        }

        __initializeSammyApp__() {
            var sammyApp = Sammy("#content", function () {
                var $content = $("#content"),
                    $weatherInfo = $("#weather");

                this.get("#/", function () {
                    $content.html("<p>Route: #/</p><p>Content: TBD</p>");
                    geolocation.getCurrentGeolocation()
                        .then(console.log)
                        .catch(console.log);
                });

                this.get("#/login", function (context) {
                    if (users.isUserLogged()) {
                        context.redirect('#/');
                        return;
                    }

                    templates.get("login")
                        .then(function (template) {
                            $content.html(template());

                            $("#btn-login").on("click", function () {
                                var logUser = {
                                    username: $('#username').val(),
                                    password: $('#password').val()
                                };

                                users.login(logUser)
                                    .then(function (response) {
                                        context.redirect('#/profile');
                                        document.location.reload(true);
                                    });
                            });
                        });
                });

                this.get("#/register", function (context) {
                    if (users.isUserLogged()) {
                        context.redirect('#/');
                        return;
                    }

                    templates.get("register")
                        .then(function (template) {
                            $content.html(template());

                            $("#btn-register").on("click", function () {
                                var newUser = {
                                    username: $('#new-username').val(),
                                    password: $('#new-username').val()
                                }

                                users.register(newUser)
                                    .then(function (response) {
                                        context.redirect('#/');
                                        document.location.reload(true);
                                    });
                            });
                        });
                });


                this.get('#/profile', function () {
                    startProfileScreen();
                });

                this.get('#/profile/:location/:duration', function (route) {
                    // Display weather location
                    // for params.location
                    // with params.duration
                    const profileScreen = $('#profile-screen');
                    if (profileScreen.length === 0) {
                        startProfileScreen();
                    }

                    let templateName;
                    let duration = Number(route.params.duration);
                    if (isNaN(duration)) {
                        duration = 14;
                    }

                    switch (duration) {
                        case 1:
                            templateName = 'current-weather';
                            break;
                        case 5:
                            templateName = 'five-day';
                            break;
                        case 14:
                            templateName = 'fourteen-day';
                            break;
                        default:
                            return;
                    }

                    Promise.all([
                        weather.getForecast(route.params.location, duration),
                        templates.get(templateName)
                    ])
                        .then(([data, template]) => {
                            const generatedHtml = template(data);
                            $("#weather-tiles").html(generatedHtml);
                            return data;
                        })
                        .then(data => {
                            const idSelector = document.getElementById('map-container');
                            idSelector.style.height = (window.innerHeight - 75) + 'px';
                            idSelector.style.width = '100%';

                            maps.initializeMap(
                                data.city.coord.lat,
                                data.city.coord.lon,
                                idSelector
                            );
                        })
                        .catch(console.log);
                });

                this.get('#/profile/add', function (route) {
                    const newLocation = $('#input-location').val();
                    if (!newLocation) {
                        return;
                    }

                    users.setUserLocations(newLocation);
                    startProfileScreen();
                    window.location = `#/profile/${newLocation}/1`;
                });

                function startProfileScreen() {
                    profileScreen.start('#content');
                    profileScreen.displayLocationsListForUser('#location-list');
                }
            });

            //logout
            $("#nav-btn-logout").on("click", function () {
                users.logout()
                    .then(function () {
                        location = "#/";
                        document.location.reload(true);
                    });
            });

            return sammyApp;
        }
    }

    return WeatherApp;
})();

export { WeatherApp };
@@ -969,24 +969,56 @@
 myApp__() %7B%0A
+            const that = this;%0A%0A
             
@@ -5752,35 +5752,1279 @@
        .
-catch(console.log);
+then(() =%3E %7B%0A                            const cityName = extractCityNameFromCurrentWindowLocation();%0A%0A                            const container = $(that._contentContainer);%0A                            container%0A                                .find('#one-day-forecast')%0A                                .attr('href', %60#/profile/$%7BcityName%7D/1%60);%0A%0A                            container%0A                                .find('#five-day-forecast')%0A                                .attr('href', %60#/profile/$%7BcityName%7D/5%60);%0A%0A                            container%0A                                .find('#fourteen-day-forecast')%0A                                .attr('href', %60#/profile/$%7BcityName%7D/14%60);%0A%0A                            console.log(cityName);%0A                        %7D)%0A                        .catch(console.log);%0A%0A                    function extractCityNameFromCurrentWindowLocation() %7B%0A                        const windowLocation = String(window.location);%0A                        const locationElements = windowLocation.split('/');%0A                        const numberOfElements = locationElements.length;%0A                        const cityName = locationElements%5BnumberOfElements - 2%5D;%0A%0A                        return cityName;%0A                    %7D
 %0A       

update buttons working