import {AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, 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,
              @Inject(PLATFORM_ID) private platformId) {}
  
  ngAfterViewInit() {
    if(this.nav && typeof UIkit !== "undefined") {
      setTimeout(() => {
        if(this.items[this.activeIndex]?.items?.length > 0) {
          UIkit.nav(this.nav.nativeElement).toggle(this.activeIndex, true);
        }
      });
    }
  }
  
  get isBrowser() {
    return this.platformId === 'browser';
  }
  
  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;
  }
  
  getItemRoute(item: MenuItem) {
    if(this.activeSubItem && item.items.length > 0) {
      let subItem = item.items.find(subItem => subItem._id === this.activeSubItem);
      return subItem?subItem.route:(item.route?item.route:null);
    } else {
      return item.route?item.route:null;
    }
  }
  
  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;
  }
}