/* eslint-disable no-prototype-builtins */
/*
 * Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BreadcrumbsService } from '@bci-web-core/core';
import { BehaviorSubject, Subject, timer } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'bci-breadcrumbs-demo',
  templateUrl: './breadcrumbs-demo.component.html',
  styleUrls: ['./breadcrumbs-demo.component.scss'],
})
export class BreadcrumbsDemoComponent implements OnInit, OnDestroy {
  public demoToc = [
    {
      title: 'Getting Started',
      url: 'getting-started',
      children: [
        {
          title: 'Introduction',
          url: 'introduction',
        },
        {
          title: 'Next Steps',
          url: 'next-steps',
        },
      ],
    },
    {
      title: 'Summary',
      url: 'summary',
      children: [
        {
          title: 'Recap',
          url: 'recap',
        },
        {
          title: 'Next Steps',
          url: 'next-steps',
          children: [
            {
              title: 'Near Term Roadmap',
              url: 'near-term',
            },
            {
              title: 'Long Term Roadmap',
              url: 'long-term',
            },
          ],
        },
      ],
    },
  ];
  public customBreadcrumbMessage = '';
  private componentDestroyed$: Subject<void> = new Subject();
  private customBreadcrumbs$ = new BehaviorSubject<any[]>([]);
  public customBreadcrumbs = this.customBreadcrumbs$.asObservable();

  constructor(private route: ActivatedRoute, private router: Router, private breadcrumbsService: BreadcrumbsService) {}

  ngOnInit() {
    this.route.params.pipe(takeUntil(this.componentDestroyed$)).subscribe((params) => {
      if (params.hasOwnProperty('level1')) {
        this.breadcrumbsService.setTemporaryTitleForPartialRoute(
          this.route.snapshot,
          [':level1'],
          this.getTocTitle([params['level1']])
        );
      }
      if (params.hasOwnProperty('level1') && params.hasOwnProperty('level2')) {
        this.breadcrumbsService.setTemporaryTitleForPartialRoute(
          this.route.snapshot,
          [':level1', ':level2'],
          this.getTocTitle([params['level1'], params['level2']])
        );
      }
    });

    timer(0, 5000)
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe(() => {
        this.customBreadcrumbs$.next([
          'Measurements',
          'Temperature',
          'Impact wrench 02',
        ]);
      });
  }

  ngOnDestroy(): void {
    this.componentDestroyed$.next();
    this.componentDestroyed$.complete();
  }

  getTocTitle(pathSegments: string[]): string {
    let items = this.demoToc;
    let result = '';
    for (const pathSegment of pathSegments) {
      const matchedItems = items.filter((item) => item.url === pathSegment);
      if (matchedItems.length) {
        const matchedItem = matchedItems[0];
        if (matchedItem.children) {
          items = <any>matchedItem.children;
        }
        result = matchedItem.title;
      }
    }
    return result;
  }

  customBreadcrumbClicked(title: string) {
    this.customBreadcrumbMessage = 'Last clicked: ' + title;
  }
}
