import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AppService } from '../../app.service';
import { MENU, NOT_ADMIN, ROLE_ADMIN } from "../../@config/menus";

@Component({
  selector: 'app-pages-layouts',
  templateUrl: './layouts.component.html',
  styles: [],
})
export class PagesLayoutsComponent implements OnInit {

  menus = MENU;
  isToggleSidebar = false;
  innerWidth: any;
  auth: any = {};
  isCollapsed: any = [];
  breadcrumb: any = [];
  permissionCheck = false;
  permission: any = [];

  constructor(
    private app: AppService,
    private router: Router,
    public changeDetectorRef: ChangeDetectorRef,
  ) {

  }

  async ngOnInit() {
    this.onCollapsed();
    this.getBreadcrumb();
    await this.initAuth();
    this.changeDetectorRef.markForCheck()
  }
  async initAuth() {
    this.auth = this.app.auth();
    // console.log(this.auth)
    // console.log(this.auth.isAdmin)
    this.menus = this.menus.map(r => {
      if (this.auth?.isAdmin) {
        if (r.roles.includes(ROLE_ADMIN)) return {
          ...r,
          children: r.children.length ? r.children.filter(c => r.roles.includes(ROLE_ADMIN)) : []
        }
      } else {
        if (r.roles.includes(NOT_ADMIN)) return {
          ...r,
          children: r.children.length ? r.children.filter(c => r.roles.includes(NOT_ADMIN)) : []
        }
      }
    })



    if (!this.permissionCheck) {
      // const users = await lastValueFrom(this.app.get(`${API.users}/getById/${this.auth.id}`));
      // this.permission = users.permission;
      // this.permissionCheck = true;
    }

  }

  roleCheck(perm: string) {
    // if(!environment.production) return true
    // return this.permission.includes(perm)
    return true;
  }

  getBreadcrumb() {
    this.breadcrumb = [];
    let router: any = this.router.url;
    router = router.split('/');
    this.mapBreadcrumb(router, this.menus)
    this.changeDetectorRef.markForCheck()

  }

  mapBreadcrumb(router: any, items: any) {
    items.map((item: any) => {
      this.addItemBreadcrumb(router, item);
      if (item.children) this.mapBreadcrumb(router, item.children);

    });
  }

  addItemBreadcrumb(router: any, item: any) {

    const data = {
      name: item.name,
      link: item.link,
    }
    if (router[2]) {
      if (item.link === router[2]) this.breadcrumb.push(data);
    }
    if (router[3]) {
      if (item.link === `${router[2]}/${router[3]}`) this.breadcrumb.push(data);
    }
    if (router[4]) {
      if (item.link === `${router[2]}/${router[3]}/${router[4]}`) this.breadcrumb.push(data);
    }
    if (router[5]) {
      if (item.link === `${router[2]}/${router[3]}/${router[4]}/${router[5]}`) this.breadcrumb.push(data);
    }
    if (router[6]) {
      if (item.link === `${router[2]}/${router[3]}/${router[4]}/${router[5]}/${router[6]}`) this.breadcrumb.push(data);
    }
  }

  onCollapsed() {
    let router: any = this.router.url;
    router = router.split('/');
    this.menus.forEach((item: any, i: number) => {
      // item.collapsed = false;
      if (item.type === 'collapsable') {
        if (router.includes(item.link)) {
          item.collapsed = true;
        }
      }
    });
  }

  logout() {
    this.app.logout();
    return this.router.navigate(['/auth']);
  }


  toggleSidebar() {
    this.isToggleSidebar = !this.isToggleSidebar;
  }

  closeSidebar() {
    this.isToggleSidebar = false;
  }

  onDeactivate() {
    this.ngOnInit();
  }
}