import {AfterViewInit, Component, ElementRef, Input, ViewChild} from '@angular/core';
import {MenuItem} from "../../../sharedComponents/menu";
import {ActivatedRoute, Router} from "@angular/router";
import {DomSanitizer} from "@angular/platform-browser";
import {properties} from "../../../../../environments/environment";
import {LayoutService} from "./layout.service";

declare var UIkit;

@Component({
  selector: 'dashboard-sidebar',
  templateUrl: 'sideBar.component.html'
})
export class SideBarComponent implements AfterViewInit {
  @Input() items: MenuItem[] = [];
  @Input() activeItem: string = '';
  @Input() activeSubItem: string = '';
  @Input() specialMenuItem: MenuItem = null;
  @Input() queryParamsHandling;
  @ViewChild("nav") nav: ElementRef
  public properties = properties;
  
  constructor(private route: ActivatedRoute, private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) {}
  
  ngAfterViewInit() {
    UIkit.nav(this.nav.nativeElement).toggle(this.activeIndex, false);
  }
  
  get currentRoute() {
    return {
      route: this.router.url.split('?')[0].split('#')[0],
      fragment: this.route.snapshot.fragment
    }
  }
  
  get activeIndex(): number {
    return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0;
  }
  
  isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
    if (this.activeItem || this.activeSubItem) {
      return (!subItem && this.activeItem === item._id) ||
        (subItem && this.activeItem === item._id && this.activeSubItem === subItem._id);
    } else {
      if (subItem) {
        return MenuItem.isTheActiveMenu(subItem, this.currentRoute);
      }
      return MenuItem.isTheActiveMenu(item,this.currentRoute);
    }
  }
  
  isTheActiveUrl(menuItemURL): boolean {
    return (menuItemURL == this.router.url.split('?')[0])
  }
  
  satinizeHTML(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
  
  public get isSmallScreen() {
    return this.layoutService.isSmallScreen;
  }
  
  public get open() {
    return this.layoutService.open;
  }
  
  public toggleOpen(event: MouseEvent) {
    event.preventDefault();
    this.layoutService.setOpen(!this.open);
  }
}