import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '../../core/services/auth/auth.service';
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';

declare interface RouteInfo {
	path: string;
	title: string;
	icon: string;
	requiresAuthentication: boolean;
}
declare interface GroupMenuItem {
	title: string;
	routes: RouteInfo[];
}

export const GENERAL_ROUTES: RouteInfo[] = [
	{ path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'dashboard', requiresAuthentication: true }
];
export const DMP_ROUTES: RouteInfo[] = [
	{ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'view_agenda', requiresAuthentication: true },
	{ path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'library_books', requiresAuthentication: true },
	{ path: '/projects', title: 'SIDE-BAR.MY-PROJECTS', icon: 'work_outline', requiresAuthentication: true }
];
// export const HISTORY_ROUTES: RouteInfo[] = [
//   { path: '/typography', title: 'SIDE-BAR.HISTORY-VISITED',  icon: 'visibility'},
//   { path: '/icons', title: 'SIDE-BAR.HISTORY-EDITED',  icon: 'edit'}
// ];
export const PUBLIC_ROUTES: RouteInfo[] = [
	{ path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public', requiresAuthentication: false },
	{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public', requiresAuthentication: false }
];

@Component({
	selector: 'app-sidebar',
	templateUrl: './sidebar.component.html',
	styleUrls: ['./sidebar.component.css', './sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
	generalItems: GroupMenuItem;
	dmpItems: GroupMenuItem;
	//   historyItems: GroupMenuItem;
	publicItems: GroupMenuItem;
	groupMenuItems: GroupMenuItem[] = [];

	constructor(public translate: TranslateService, private authentication: AuthService, private dialog: MatDialog) { }

	ngOnInit() {
		this.generalItems = {
			title: 'SIDE-BAR.GENERAL',
			routes: GENERAL_ROUTES
		}
		this.groupMenuItems.push(this.generalItems);

		this.dmpItems = {
			title: 'SIDE-BAR.DMP',
			routes: DMP_ROUTES
		}
		this.groupMenuItems.push(this.dmpItems);

		// this.historyItems = {
		// 	title: 'SIDE-BAR.HISTORY',
		// 	routes: HISTORY_ROUTES
		// }
		// this.groupMenuItems.push(this.historyItems);

		this.publicItems = {
			title: 'SIDE-BAR.PUBLIC',
			routes: PUBLIC_ROUTES
		}
		this.groupMenuItems.push(this.publicItems);
	}

	public principalHasAvatar(): boolean {
		return this.authentication.current().avatarUrl != null;
	}

	public getPrincipalAvatar(): string {
		return this.authentication.current().avatarUrl;
	}

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

	public getMenuItems() {

		if (this.isAuthenticated()) {
			return this.groupMenuItems;
		} else {
			const groupMenuItems = this.groupMenuItems.filter(x => x);
			groupMenuItems.forEach(group => {
				group.routes = group.routes.filter(y => !y.requiresAuthentication);
			});
			return groupMenuItems.filter(x => x.routes.length > 0);
		}
	}

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