/*
 * 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 { MatTableDataSource } from '@angular/material/table';
import { map, startWith, takeUntil } from 'rxjs/operators';
import { Observable, Subject, fromEvent} from 'rxjs';
import { Router, ActivatedRoute } from '@angular/router';
import { BreakpointObserver } from '@angular/cdk/layout';
import { BOSCH_MEDIA_QUERIES } from '@bci-web-core/core';

@Component({
  selector: 'bci-master-detail-nested-tabs-demo',
  templateUrl: './md-nested-tabs-demo.component.html',
  styleUrls: ['./md-nested-tabs-demo.component.scss'],
})
export class MdNestedTabsDemoComponent implements OnInit, OnDestroy {
  private componentDestroyed$ = new Subject<void>();
  useSlideoverSidebarMode = false;
  displayedColumns = ['name', 'amount', 'actions'];
  dataSource: MatTableDataSource<DeviceTypesModel>;

  isMobile$: Observable<boolean>;
  checkScreenSize = (): boolean => document.body.offsetWidth < 768;
  closeTrigger = () => this.router.navigate(['.'], { relativeTo: this.route });

  detailViewSize: number = 600;

  constructor(public breakpointObserver: BreakpointObserver, public route: ActivatedRoute, public router: Router) {
    // customize responsive behavior of sidebar / slideover switch
    this.breakpointObserver
      .observe(BOSCH_MEDIA_QUERIES.mobile)
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe(() => {
        this.useSlideoverSidebarMode = this.breakpointObserver.isMatched(BOSCH_MEDIA_QUERIES.mobile);
      });
  }

  ngOnInit() {
    this.dataSource = new MatTableDataSource<DeviceTypesModel>([
      { id: 1, name: 'Ligula Vehicula Sem', amount: 0 },
      { id: 2, name: 'Consectetur Ultricies Magna', amount: 0 },
      { id: 3, name: 'Ultricies Fusce Curcus', amount: 631 },
      { id: 4, name: 'Venenatis', amount: 23 },
      { id: 5, name: 'Vehicula', amount: 34 },
      { id: 6, name: 'Nullam Fermentum', amount: 0 },
      { id: 7, name: 'Sollicitudin Cras Nibh', amount: 0 },
      { id: 8, name: 'Sem Ipsum Lorem', amount: 32 },
      { id: 9, name: 'Adipiscing Magna Inceptos', amount: 212 },
      { id: 10, name: 'Fusce Dapibus Justo', amount: 233 },
      { id: 11, name: 'Ligula Vehicula Sem', amount: 0 },
      { id: 12, name: 'Consectetur Ultricies Magna', amount: 0 },
      { id: 13, name: 'Ultricies Fusce Curcus', amount: 631 },
      { id: 14, name: 'Venenatis', amount: 23 },
      { id: 15, name: 'Vehicula', amount: 34 },
      { id: 16, name: 'Nullam Fermentum', amount: 0 },
      { id: 17, name: 'Sollicitudin Cras Nibh', amount: 0 },
      { id: 18, name: 'Sem Ipsum Lorem', amount: 32 },
      { id: 19, name: 'Adipiscing Magna Inceptos', amount: 212 },
      { id: 20, name: 'Fusce Dapibus Justo', amount: 233 },
    ]);
    const screenSizeChanged$ = fromEvent(window, 'resize').pipe(map(this.checkScreenSize));
    this.isMobile$ = screenSizeChanged$.pipe(startWith(this.checkScreenSize()));
  }

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

interface DeviceTypesModel {
  id: number;
  name: string;
  amount: number;
}
