import { of as observableOf, Subscription } from 'rxjs';

import { switchMap, filter, map, takeUntil } from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { environment } from '../environments/environment';
import { AuthService } from './core/services/auth/auth.service';
import { CultureService } from './core/services/culture/culture-service';
import { BreadCrumbResolverService } from './ui/misc/breadcrumb/service/breadcrumb.service';
import { Title } from '@angular/platform-browser';
import { NgcCookieConsentService, NgcStatusChangeEvent } from "ngx-cookieconsent";
import { CookieService } from "ngx-cookie-service";
import { LanguageService } from './core/services/language/language.service';
import { ConfigurationService } from './core/services/configuration/configuration.service';

import { Location } from '@angular/common';


declare const gapi: any;
declare var $: any;

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

	hasBreadCrumb = observableOf(false);
	sideNavOpen = false;
	helpContentEnabled: boolean;
	private statusChangeSubscription: Subscription;
	onlySplash = true;

	constructor(
		private router: Router,
		private route: ActivatedRoute,
		private authentication: AuthService,
		private translate: TranslateService,
		private breadCrumbResolverService: BreadCrumbResolverService,
		private titleService: Title,
		private cultureService: CultureService,
		private cookieService: CookieService,
		private ccService: NgcCookieConsentService,
		private language: LanguageService,
		private configurationService: ConfigurationService,
		private location: Location
	) {
		this.initializeServices();
		this.helpContentEnabled = configurationService.helpService.enabled;
	}

	onActivate(event: any) {
		this.breadCrumbResolverService.push(event);
	}

	onDeactivate(event: any) {
		//this.breadCrumbResolverService.clear()
	}

	ngOnInit() {
		if (this.location.path() === '') {
			if (!this.configurationService.useSplash) {
				this.onlySplash = false;
				this.router.navigate(['/reload']).then(() => this.router.navigate(['/home']));
			} else {
				this.onlySplash = true;
				this.router.navigate(['/reload']).then(() => this.router.navigate(['/splash']));
			}
		} else if (this.location.path() === '/splash') {
			this.onlySplash = true;
		} else {
			this.onlySplash = false;
		}
		if (!this.cookieService.check("cookiesConsent")) {
			this.cookieService.set("cookiesConsent", "false", 356);
		}

		this.hasBreadCrumb = this.router.events.pipe(
			filter(event => event instanceof NavigationEnd),
			map(() => this.route),
			map(route => route.firstChild),
			switchMap(route => route.data),
			map(data => data['breadcrumb']));

		const appTitle = this.titleService.getTitle();
		this.router
			.events.pipe(
				filter(event => event instanceof NavigationEnd),
				map(() => {
					let child = this.route.firstChild;
					while (child.firstChild) {
						child = child.firstChild;
					}
					if (child.snapshot.data['title']) {
						return child.snapshot.data['title'];
					}
					return appTitle;
				})
			).subscribe((ttl: string) => {
				if (ttl.length > 0) {
					this.translate.get(ttl).subscribe((translated: string) => {
						this.translate.get('GENERAL.TITLES.PREFIX').subscribe((titlePrefix: string) => {
							this.titleService.setTitle(titlePrefix + translated);
						});
					});
				} else {
					this.translate.get('GENERAL.TITLES.GENERAL').subscribe((translated: string) => {
						this.titleService.setTitle(translated);
					});
				}
			});

		this.statusChangeSubscription = this.ccService.statusChange$.subscribe((event: NgcStatusChangeEvent) => {
			if (event.status == "dismiss") {
				this.cookieService.set("cookiesConsent", "true", 365);
			}
		});

		this.ccService.getConfig().content.href = this.configurationService.app + "cookies-policy";
		this.ccService.getConfig().cookie.domain = this.configurationService.app;
		this.translate
			.get(['COOKIE.MESSAGE', 'COOKIE.DISMISS', 'COOKIE.DENY', 'COOKIE.LINK', 'COOKIE.POLICY'])
			.subscribe(data => {
				this.ccService.getConfig().content = this.ccService.getConfig().content || {};
				// Override default messages with the translated ones
				this.ccService.getConfig().content.message = data['COOKIE.MESSAGE'];
				this.ccService.getConfig().content.dismiss = data['COOKIE.DISMISS'];
				this.ccService.getConfig().content.deny = data['COOKIE.DENY'];
				this.ccService.getConfig().content.link = data['COOKIE.LINK'];
				this.ccService.getConfig().content.policy = data['COOKIE.POLICY'];

				if (this.cookieService.get("cookiesConsent") == "true") {
					this.ccService.getConfig().enabled = false;
				}
				this.ccService.destroy();
				this.ccService.init(this.ccService.getConfig());
			})
	}

	ngOnDestroy() {
		this.statusChangeSubscription.unsubscribe();
	}

	login() {
		//redirect to login page
		this.router.navigate(['/login'], { queryParams: { /*refresh : Math.random() ,returnUrl: this.state.url*/ } });
	}

	logout() {

	}

	public isAuthenticated(): boolean {
		return !(!this.authentication.current());
	}

	goToDMPs() {
		this.router.navigate(['/plans'], { queryParams: { /*refresh : Math.random() ,returnUrl: this.state.url*/ } });
	}

	// ----------- UNCOMMENT TO ADD AGAIN GRANTS --------
	// goToGrants() {
	// 	this.router.navigate(['/grants'], { queryParams: { /*refresh : Math.random() ,returnUrl: this.state.url*/ } });
	// }

	initializeServices() {
		this.translate.setDefaultLang('en');
		this.authentication.current() && this.authentication.current().culture ? this.cultureService.cultureSelected(this.authentication.current().culture) : this.cultureService.cultureSelected(this.configurationService.defaultCulture);
		this.authentication.current() && this.authentication.current().language ? this.language.changeLanguage(this.authentication.current().language) : this.language.changeLanguage('en');
	}

	toggleNavbar(event) {
		document.getElementById('hamburger').classList.toggle("change");
	}
}