import { sample } from 'rxjs/operators';
import { Component, EventEmitter, Input, Output, ElementRef } from '@angular/core';
import { Principal } from '../../../models/login/Principal';
import { AuthService } from '../../../services/auth/auth.service';
import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
import { MatSidenav, MatDialog } from '@angular/material';
import { UserDialogComponent } from '../user-dialog/user-dialog.component';
import { SingleAutoCompleteConfiguration } from '../autocompletes/single/single-auto-complete-configuration';
import { ProjectCriteria } from '../../../models/criteria/project/ProjectCriteria';
import { RequestItem } from '../../../models/criteria/RequestItem';
import { ProjectService } from '../../../services/project/project.service';
import { FormControl } from '@angular/forms';
import { DashboardService } from '../../../services/dashboard/dashboard.service';
import { Observable } from 'rxjs/Observable';
import { SearchBarItem, SearchBarItemType } from '../../../models/dashboard/SearchBarItem';
import { SearchBarType } from '../search-bar/types/search-bar-type';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navigation',
  templateUrl: 'navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
  providers: [ProjectService]
})

export class NavigationComponent {
  invert = false;
  public search = false;
  projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
  public searchControl = new FormControl();
  filteredOptions: Observable<SearchBarItem[]>;

  constructor(
    private authentication: AuthService,
    private languageResolver: LanguageResolverService,
    public dialog: MatDialog,
    private projectService: ProjectService,
    private dashBoardService: DashboardService,
    private router: Router,

  ) {

  }

  ngOnInit() {
    this.projectAutoCompleteConfiguration = {
      filterFn: this.searchProject.bind(this),
      items: this.searchProject(''),
      displayFn: (item) => item["label"],
      titleFn: (item) => item["label"],
      //mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
      loadDataOnStart: true
    };

    this.filteredOptions = this.searchControl.valueChanges.debounceTime(500).distinctUntilChanged().flatMap(x => {
      return this.dashBoardService.searchUserItems(x);
    })
  }

  searchProject(query: string) {
    let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
    projectRequestItem.criteria = new ProjectCriteria();
    projectRequestItem.criteria.like = query;
    return this.projectService.getWithExternal(projectRequestItem);
  }

  public logout(): void {
    this.authentication.logout();
  }

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

  @Input()
  sideNav: MatSidenav;

  @Output()
  sidenavOpenChanges = new EventEmitter();

  events: string[] = [];
  opened: boolean;

  public isAdmin(): boolean {
    if (!this.authentication.current()) { return false }
    const principalRoles = this.authentication.current().appRoles;
    for (let i = 0; i < principalRoles.length; i++) {
      if (principalRoles[i] === Principal.AppRole.Admin) {
        return true;
      }
    }
    return false;
  }

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

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

  onSideNavClick() {
    this.sideNav.toggle();
  }

  openProfile() {
    let dialogRef = this.dialog.open(UserDialogComponent, {
      hasBackdrop: true,
      closeOnNavigation: true,
      disableClose: false,
      position: { top: "64px", left: "85%" }
    });
  }

  onOptionSelected(event: any) {
    this.search = false;
    this.searchControl.patchValue(null);
    let selectedSearchBarItem = event.option.value;
    if (selectedSearchBarItem.type == SearchBarType.DATASET) this.router.navigate(["datasets/edit/" + selectedSearchBarItem.id])
    if (selectedSearchBarItem.type == SearchBarType.PROJECT) this.router.navigate(["projects/edit/" + selectedSearchBarItem.id])
    if (selectedSearchBarItem.type == SearchBarType.DATAMANAGEMENTPLAN) this.router.navigate(["dmps/edit/" + selectedSearchBarItem.id])
  }

  transformType(type) {
    switch(type){
      case SearchBarItemType.DATASET: return "Dataset"
      case SearchBarItemType.DMP: return "DMP"
      case SearchBarItemType.PROJECT: return "Project"
    }
  }
}