import { Observable } from 'rxjs/Observable';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-breadcrumb',
  template: `
    <div class="breadcrumb">
      <a class="crumb" *ngFor="let crumb of crumbs | async" [routerLink]="crumb.path">
        {{crumb.name}}
      </a>
    </div>
  `,
  styleUrls: ['./breadcrumb.component.scss']
})
export class BreadcrumbComponent implements OnInit {

  crumbs: Observable<{
    name: string,
    path: string[]
  }[]>;

  constructor(public route: ActivatedRoute) { }

  ngOnInit() {
    this.crumbs = this.route.url.map(url =>
      url.map((value, index, array) => ({
        name: value.path,
        path: ['/'].concat(array.slice(0, index + 1).map(val => val.path))
      })));
  }
}