import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { MatomoService } from '@app/core/services/matomo/matomo-service';
import { TranslateService } from '@ngx-translate/core';
import { AppRole } from '../../core/common/enum/app-role';
import { AuthService, LoginStatus } from '../../core/services/auth/auth.service';
import { LanguageDialogComponent } from '../language/dialog/language-dialog.component';
import { UserDialogComponent } from '../navbar/user-dialog/user-dialog.component';
import { AppPermission } from '@app/core/common/enum/permission.enum';
import { takeUntil } from 'rxjs/operators';

declare interface RouteInfo {
	path: string;
	title: string;
	icon: string;
	url?: string;
}
declare interface GroupMenuItem {
	title: string;
	routes: RouteInfo[];
}

@Component({
	selector: 'app-sidebar',
	templateUrl: './sidebar.component.html',
	styleUrls: ['./sidebar.component.css', './sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
	generalItems: GroupMenuItem;
	dmpItems: GroupMenuItem;
	adminItems: GroupMenuItem;
	datasetTemplateItems: GroupMenuItem;
	//   historyItems: GroupMenuItem;
	datasetItems: GroupMenuItem;
	grantItems: GroupMenuItem;
	publicItems: GroupMenuItem;
	infoItems: GroupMenuItem;
	groupMenuItems: GroupMenuItem[] = [];
	private toggleButton: any;
	currentRoute: string;

	constructor(
		public translate: TranslateService,
		private authentication: AuthService,
		private dialog: MatDialog,
		public router: Router,
		private location: Location,
		private httpClient: HttpClient,
		private matomoService: MatomoService
	) {
	}

	ngOnInit() {
		this.matomoService.trackPageView('Sidebar');
		this.currentRoute = this.router.url;

		this.authentication.getAuthenticationStateObservable().pipe().subscribe(authenticationState => {
			this.reCalculateMenu()
		});

		this.reCalculateMenu();

		this.router.events.subscribe((event) => this.currentRoute = this.router.url);
	}

	private reCalculateMenu() {
		this.groupMenuItems = []
		this.generalItems = {
			title: 'SIDE-BAR.GENERAL',
			routes: [],
		}
		this.generalItems.routes.push({ path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'home' });

		this.groupMenuItems.push(this.generalItems);

		this.dmpItems = {
			title: 'SIDE-BAR.DMP',
			routes: [],
		}

		if (this.authentication.hasPermission(AppPermission.ViewMyDmpPage)) this.dmpItems.routes.push({ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'library_books' });
		if (this.authentication.hasPermission(AppPermission.ViewMyDescriptionPage)) this.dmpItems.routes.push({ path: '/descriptions', title: 'SIDE-BAR.MY-DESCRIPTIONS', icon: 'dns' });
		this.groupMenuItems.push(this.dmpItems);

		this.datasetItems = {
			title: 'SIDE-BAR.DATASETS',
			routes: [],
		}

		if (this.authentication.hasPermission(AppPermission.ViewPublicDmpPage)) this.datasetItems.routes.push({ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'library_books' });
		if (this.authentication.hasPermission(AppPermission.ViewPublicDescriptionPage)) this.datasetItems.routes.push({ path: '/explore-descriptions', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'dns' });
		this.groupMenuItems.push(this.datasetItems);

		this.publicItems = {
			title: 'SIDE-BAR.PUBLIC',
			routes: [],
		}
		this.publicItems.routes.push({ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'library_books' });
		this.publicItems.routes.push({ path: '/explore-descriptions', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'dns' });
		this.groupMenuItems.push(this.publicItems);

		this.adminItems = {
			title: 'SIDE-BAR.ADMIN',
			routes: [],
		}
		if (this.authentication.hasPermission(AppPermission.ViewDmpBlueprintPage)) this.adminItems.routes.push({ path: '/dmp-blueprints', title: 'SIDE-BAR.DMP-BLUEPRINTS', icon: 'library_books' });
		if (this.authentication.hasPermission(AppPermission.ViewDescriptionTemplatePage)) this.adminItems.routes.push({ path: '/description-templates', title: 'SIDE-BAR.DESCRIPTION-TEMPLATES', icon: 'description' });
		if (this.authentication.hasPermission(AppPermission.ViewDescriptionTemplateTypePage)) this.adminItems.routes.push({ path: '/description-template-type', title: 'SIDE-BAR.DESCRIPTION-TEMPLATE-TYPES', icon: 'stack' });
		if (this.authentication.hasPermission(AppPermission.ViewEntityLockPage)) this.adminItems.routes.push({ path: '/entity-locks', title: 'SIDE-BAR.ENTITY-LOCKS', icon: 'lock_person' });
		if (this.authentication.hasPermission(AppPermission.ViewReferencePage)) this.adminItems.routes.push({ path: '/references', title: 'SIDE-BAR.REFERENCES', icon: 'dataset_linked' });
		if (this.authentication.hasPermission(AppPermission.ViewReferenceTypePage)) this.adminItems.routes.push({ path: '/reference-type', title: 'SIDE-BAR.REFERENCE-TYPES', icon: 'add_link' });
		if (this.authentication.hasPermission(AppPermission.ViewPrefillingSourcePage)) this.adminItems.routes.push({ path: '/prefilling-sources', title: 'SIDE-BAR.PREFILLING-SOURCES', icon: 'quick_reference_all' });
		if (this.authentication.hasPermission(AppPermission.ViewTenantPage)) this.adminItems.routes.push({ path: '/tenants', title: 'SIDE-BAR.TENANTS', icon: 'tenancy' });
		if (this.authentication.hasPermission(AppPermission.ViewUserPage)) this.adminItems.routes.push({ path: '/users', title: 'SIDE-BAR.USERS', icon: 'people' });
		if (this.authentication.hasPermission(AppPermission.ViewLanguagePage)) this.adminItems.routes.push({ path: '/languages', title: 'SIDE-BAR.LANGUAGES', icon: 'language' });
		if (this.authentication.hasPermission(AppPermission.ViewSupportiveMaterialPage)) this.adminItems.routes.push({ path: '/supportive-material', title: 'SIDE-BAR.SUPPORTIVE-MATERIAL', icon: 'help_center' });
		if (this.authentication.hasPermission(AppPermission.ViewNotificationTemplatePage)) this.adminItems.routes.push({ path: '/notification-templates', title: 'SIDE-BAR.NOTIFICATION-TEMPLATES', icon: 'grid_guides' });
		if (this.authentication.hasPermission(AppPermission.ViewNotificationPage)) this.adminItems.routes.push({ path: '/notifications', title: 'SIDE-BAR.NOTIFICATIONS', icon: 'notifications' });
		if (this.authentication.hasPermission(AppPermission.ViewMaintenancePage)) this.adminItems.routes.push({ path: '/maintenance-tasks', title: 'SIDE-BAR.MAINTENANCE', icon: 'build' });
		this.groupMenuItems.push(this.adminItems);

		this.infoItems = {
			title: "",
			routes: [],
		}
		this.infoItems.routes.push({ path: '/co-branding', title: 'SIDE-BAR.CO-BRANDING', icon: 'toll' });
		this.infoItems.routes.push({ path: '/contact-support', title: 'SIDE-BAR.SUPPORT', icon: 'help' });
		this.infoItems.routes.push({ path: '/feedback', title: 'SIDE-BAR.FEEDBACK', icon: 'feedback', url: 'https://docs.google.com/forms/d/12RSCrUjdSDp2LZLpjDKOi44cN1fLDD2q1-F66SqZIis/viewform?edit_requested=true' });
		this.groupMenuItems.push(this.infoItems);
	}

	public principalHasAvatar(): boolean {
		return this.authentication.getUserProfileAvatarUrl() != null && this.authentication.getUserProfileAvatarUrl().length > 0;
	}

	public getDefaultAvatar(): string {
		return 'assets/images/profile-placeholder.png';
	}

	public applyFallbackAvatar(ev: Event) {
		(ev.target as HTMLImageElement).src = this.getDefaultAvatar();
	}

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

	public isAdmin(): boolean {
		return this.authentication.hasRole(AppRole.Admin);
	}

	public hasPermission(role: AppRole): boolean {
		return this.authentication.hasRole(role);
	}

	isLoginRouteActivated(): boolean {
		return this.location.path().indexOf('/login') > -1;
	}

	public logout(): void {
		this.router.navigate(['/logout']);
	}

	showItem(value: GroupMenuItem) {
		return value.routes && value.routes.length > 0;
	}

	openProfile() {
		const dialogRef = this.dialog.open(UserDialogComponent, {
			hasBackdrop: true,
			autoFocus: false,
			closeOnNavigation: true,
			disableClose: false,
			position: { top: '64px', right: '1em' },
			panelClass: 'custom-userbox'
		});
	}

	public onInvalidUrl(): boolean {
		return this.currentRoute === '/language-editor' || this.currentRoute === '/profile';
	}

	public openLanguageDialog() {
		if (this.dialog.openDialogs.length > 0) {
			this.dialog.closeAll();
		}
		else {
			const dialogRef = this.dialog.open(LanguageDialogComponent, {
				disableClose: true,
				data: {
					isDialog: true
				}
			});
		}
	}

	public openFeedback(groupMenuRoute: RouteInfo) {
		window.open(groupMenuRoute.url, '_blank');
	}

}