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';
import { environment } from '../environments/environment';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    step: string;
    isDevelopmentEnv = false;

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

        this.isDevelopmentEnv = !environment.production;
    }

    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);
            });
    }

    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';
            }
        }
    }
}