import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { NavigationStart, Router } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';

import { environment } from '../environments/environment';
import { Theme } from './core/enums/theme.enum';
import { ThemeService } from './core/services/theme.service';
import { ConfigService } from './services/config.service';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
	public appTitle: string = environment.appTitle;
	public themeClass: string;
	public isDebugMode = false;
	private themeSubscription: Subscription;

	public step: string;

	constructor(
		private titleService: Title,
		private themeService: ThemeService,
		public config: ConfigService,
		@Inject(DOCUMENT) private document,
		private router: Router
	) {}

	ngOnInit(): void {
		if (!environment.production) {
			this.isDebugMode = true;
			this.appTitle += ' | DEV';
			console.info(' ######### framadate | DEV ######### we are NOT in production env, filling with mock values');
		}
		this.titleService.setTitle(this.appTitle);
		this.themeSubscription = this.themeService.theme.subscribe((theme: Theme) => {
			switch (theme) {
				case Theme.DARK:
					this.themeClass = 'theme-dark-crystal';
					break;
				case Theme.RED:
					this.themeClass = 'theme-hot-covid';
					break;
				default:
					this.themeClass = 'theme-light-watermelon';
			}
		});

		this.detectCurrentTabOnRouteChange();
	}

	ngOnDestroy(): void {
		if (this.themeSubscription) {
			this.themeSubscription.unsubscribe();
		}
	}

	public detectCurrentTabOnRouteChange(): void {
		this.router.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);
			});
	}

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

	public updateCurrentTab(event): void {
		if (event.url) {
			const tab: string[] = event.url.split('/');
			this.step = tab && tab[2] ? tab[2] : 'home';
		}
	}

	public toggleMenu(): void {
		// TODO: move this logic elsewhere, probably in Navbar component
		this.config.menuVisible = !this.config.menuVisible;
	}
}