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 class="uk-navbar-nav">
      <li>
        <a *ngIf="!loggedIn && !mobileView" (click)="logIn()">Sign in</a>
        <ng-container *ngIf="loggedIn && !mobileView">
          <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>
        <a *ngIf="!loggedIn && mobileView" (click)="logIn()">
          <icon name="login" ratio="1.5" [flex]="true"></icon>
        </a>
        <a *ngIf="loggedIn && mobileView" href="#account" class="login uk-icon" uk-toggle>
          <svg height="30" width="30">
            <circle cx="15" cy="15" r="15" stroke-width="2"></circle>
            <text x="50%" y="50%" text-anchor="middle" dy=".35em" font-size="14">
              {{firstLetters ? firstLetters : 'AN'}}
            </text>
          </svg>
        </a>
        <div *ngIf="loggedIn" id="account" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true">
          <div class="uk-offcanvas-bar uk-padding-remove-horizontal">
            <button class="uk-offcanvas-close uk-icon uk-close">
              <icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
            </button>
            <div class="uk-padding uk-flex uk-flex-middle">
              <div class="login">
                <svg height="60" width="60" style="max-width: 60px; height: 60px;">
                  <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>
              </div>
              <h5 class="uk-margin-small-left uk-margin-remove-bottom uk-margin-remove-top uk-text-truncate">
                {{user.fullname}}
              </h5>
            </div>
            <ul class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
              <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>
          </div>
        </div>
      </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();
    }
  }
  
  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('');
    }
  }
}