import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from './utils/helper.class';
import {RouterHelper} from '../utils/routerHelper.class';
import {Subscriber} from "rxjs";
import {MenuItem} from "../sharedComponents/menu";
import {UserManagementService} from "../services/user-management.service";

@Component({
  selector: 'user-mini',
  template: `
    <ul *ngIf="!mobileView" class="uk-navbar-nav">
      <li class="uk-parent">
        <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
        <ng-container *ngIf="loggedIn">
          <a class="login uk-icon">
            <svg height="60" width="60">
              <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
              <text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
                {{firstLetters ? firstLetters : 'AN'}}
              </text>
            </svg>
          </a>
          <div class="uk-navbar-dropdown uk-dropdown" uk-dropdown="pos: bottom-right">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <ng-container *ngFor="let item of userMenuItems ">
                <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"
                    [class.uk-active]="isTheActiveSubMenu(item)">
                  <a *ngIf="item.route" [routerLink]="item.route"
                     [queryParams]="item.params">{{item.title}}</a>
                  <a *ngIf="!item.route && item.url" [href]="item.url" [class.custom-external]="item.target != '_self'"
                     [target]="item.target">{{item.title}}</a>
                </li>
              </ng-container>
              <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
              <li><a (click)="logOut()">Log out</a></li>
            </ul>
          </div>
        </ng-container>
      </li>
    </ul>
    <ul *ngIf="mobileView" class="uk-nav uk-nav-default">
      <li>
          <span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
            <span>{{user.fullname + " "}}</span>
            <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle>
              <path fill="none" stroke="#000" stroke-width="1.1"
                d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path>
            </svg>
            </span>
          </span>
        <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
        <ul *ngIf="loggedIn" class="uk-nav-sub">
          <ng-container *ngFor="let item of userMenuItems ">
            <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
              <a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas()">{{item.title}}</a>
              <a *ngIf="!item.route && item.url" (click)="closeCanvas()" [href]="item.url" [class.custom-external]="item.target != '_self'"
                 [target]="item.target">{{item.title}}</a>
            </li>
          </ng-container>
          <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
          <li><a (click)="logOut()">Log out</a></li>
        </ul>
      </li>
    </ul>
  `
})
export class UserMiniComponent implements OnInit, OnChanges {
  @Input() user: User;
  public loggedIn: boolean = false;
  public isAuthorized: boolean = false;
  @Input() public mobileView: boolean = false;
  public firstLetters: string = "";
  public server: boolean = true;
  public routerHelper: RouterHelper = new RouterHelper();
  @Input() userMenuItems;
  @Input() logInUrl;
  @Input() logOutUrl;
  @Input() cookieDomain;
  @Output() closeCanvasEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  private subscriptions = [];
  
  constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) {
  }
  
  ngOnInit() {
    if (typeof document !== 'undefined') {
      this.server = false;
    }
    this.initUser();
  }
  
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.user) {
      this.initUser();
    }
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscriber) {
        subscription.unsubscribe();
      }
    });
  }
  
  closeCanvas() {
    this.closeCanvasEmitter.emit(true);
  }
  
  initUser() {
    if (this.user) {
      this.loggedIn = true;
      this.parseName();
      this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);
    } else {
      this.loggedIn = false;
      this.isAuthorized = false;
      this.user = null;
    }
  }
  
  logOut() {
    if (this.user) {
      this.userManagementService.logout();
    }
    this.loggedIn = false;
    this.isAuthorized = false;
    this.user = new User();
  }
  
  logIn() {
    this.userManagementService.login();
  }
  
  isTheActiveSubMenu(menuItem: MenuItem): boolean {
    let currentRoute = this.router.url.split('?')[0];
    return menuItem.route == currentRoute || menuItem.route == (currentRoute + "/");
  }
  
  parseName() {
    this.firstLetters = "";
    if (this.user && this.user.firstname) {
      this.firstLetters += this.user.firstname.substr(0, 1);
    }
    if (this.user && this.user.lastname) {
      this.firstLetters += this.user.lastname.substr(0, 1);
    }
    if (!this.firstLetters && this.user && this.user.fullname) {
      let matches = this.user.fullname.match(/\b(\w)/g);
      this.firstLetters += matches.join('');
    }
  }
}