import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd, PRIMARY_OUTLET, RoutesRecognized } from '@angular/router';
import { map, filter, scan } from 'rxjs/operators';
import { CookieService } from 'ngx-cookie-service';
import { MenuService } from '../../shared/services/menu.service';

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.css']
})
export class BreadcrumbComponent implements OnInit {

  name: string;
  menu: Array<any> = [];
  breadcrumbList: Array<any> = [];

  constructor(private menuService: MenuService, private _router: Router, private cookieService: CookieService) { 
    this.menu = this.menuService.getMenu();
    this.listenRouting();
  }

  ngOnInit() {
  }

  /* 監聽routing事件 */
  listenRouting() {
    let routerUrl: string, routerList: Array<any>, target: any;
    this._router.events.subscribe((router: any) => {
      routerUrl = router.urlAfterRedirects;
      if (routerUrl && typeof routerUrl === 'string') {
        // breadcrumb
        target = this.menu;
        this.breadcrumbList.length = 0;
        // routing url, [0], [1] ...etc
        routerList = routerUrl.slice(1).split('/');
        routerList.forEach((router, index) => {
          // menu routing
          // target = target.find(page => page.path === router);
          let selectedTarget;
          for (let i = 0; i < target.length; i++) {
            if (target[i]['path'] === router) {
              selectedTarget = target[i];
              break;
            } else {
              selectedTarget = '';
            }
          }

          // breadcrumbList loop list

          if (selectedTarget != undefined && selectedTarget != '') {

            let alreadyExists = this.alreadyExists('ClientHome');


            if (!alreadyExists && selectedTarget['path'] === 'app-client-detail') {
              this.breadcrumbList.push({
                name: 'Data/Info collection',
                // routing
                path: 'ClientHome'
                //path: (index === 0) ? selectedTarget.path : `${this.breadcrumbList[index - 1].path}/${selectedTarget.path.slice(2)}`
              });
            }

            this.breadcrumbList.push({
              name: selectedTarget.name,
              // routing
              path: selectedTarget.path
              //path: (index === 0) ? selectedTarget.path : `${this.breadcrumbList[index - 1].path}/${selectedTarget.path.slice(2)}`
            });
            // 下一層要比對的目標是這一層指定的子頁面
            if (index + 1 !== routerList.length) {
              selectedTarget = selectedTarget.children;
            }
          }

        });

      }
    });
  }

  // Check already there
  alreadyExists(checkMenu) {
    let status = false;
    for (let i = 0; i < this.breadcrumbList.length; i++) {
      if (this.breadcrumbList[i]['path'] === checkMenu) {
        status = true;
        break;
      } else {
        status = false;
      }
    }
    return status;
  }


  navigatePage(selectedMenu: any) {

    if (selectedMenu['path'] === 'ClientHome') {
      let loggedUserID = this.cookieService.get('CompanyId');
      let loggedCompanyID =this.cookieService.get('LoggedUserId');
      this._router.navigate(['/ClientHome/'+loggedUserID]);
    } 
  }

}