import {Component, Inject} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {NavigationStart, Router} from '@angular/router';
import {DOCUMENT} from "@angular/common";
import {filter} from "rxjs/operators";
import {ConfigService} from "./services/config.service";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    currentLang = 'fr';
    langsAvailable = ['fr', 'en'];
    title = 'framadate';
    //translation demo:
    minutes = 12;
    user = {
        name: 'Arthur',
        age: 42
    };
    menuVisible: boolean = true;
    step: string;

    constructor(private translate: TranslateService,
                private config : ConfigService,
                @Inject(DOCUMENT) private document,
                private route: Router) {
        this.translate.setDefaultLang(this.currentLang);
        this.detectCurrentTabOnRouteChange();

    }

    detectCurrentTabOnRouteChange() {
        this.route.events.subscribe((event: any) => {


        });
        this.route.events.pipe(filter(event => event instanceof NavigationStart)).subscribe((event:NavigationStart) => {
            this.scrollGoToTop();
            this.updateCurrentTab(event);
            // only if there is a poll ID
            this.config.fetchPollFromRoute(event);
        })

    }

    switchLanguage(language: string) {
        this.translate.use(language);
        this.currentLang = language;
    }

    /**
     * set the next lang or loop to the first
     * this is to manage future languages available
     */
    changeLanguage() {
        let langs = this.langsAvailable;
        let indexofCurrent = langs.indexOf(this.currentLang);
        if (indexofCurrent > -1) {
            let newIndex = indexofCurrent + 1;
            if (newIndex > (langs.length - 1)) {
                newIndex = 0;
            }
            this.currentLang = this.langsAvailable[newIndex];
        }
        this.translate.use(this.currentLang);
    }

    toggleMenu() {
        this.menuVisible = !this.menuVisible;
    }

    scrollGoToTop() {
        this.document.documentElement.scrollTop = 0;
    }

    updateCurrentTab(event){
        if (event.url) {
            const tab = event.url.split('/');
            if (tab && tab[2]) {
                this.step = tab[2];
            } else {
                this.step = 'home';
            }
        }
    }
}