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

@Component({
  selector: 'bci-md-nested-tabs-details-demo',
  templateUrl: './md-nested-tabs-details-demo.component.html',
  styleUrls: ['./md-nested-tabs-details-demo.component.scss'],
})
export class MdNestedTabsDetailsDemoComponent implements OnInit, OnDestroy, DetailsComponent {
  isMobileView = false;
  displayedColumnsDeviceTypeInformation = ['name', 'manufacturer', 'overrideOwnerID', 'version', 'actions'];
  dataSourceDeviceTypeInformation: MatTableDataSource<DeviceTypeInformationModel>;
  displayedColumnsCustomProperties = ['name', 'description', 'unit', 'dataType', 'dataValue', 'mandatory', 'actions'];
  dataSourceCustomProperties: MatTableDataSource<CustomPropertiesModel>;
  private componentDestroyed$ = new Subject<void>();

  constructor(
    public masterDetailView: MasterDetailViewComponent,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private breakpointObserver: BreakpointObserver,
    private breadcrumbsService: BreadcrumbsService
  ) {
    // customize responsive behavior of sidebar / slideover switch
    this.breakpointObserver
      .observe(BOSCH_MEDIA_QUERIES.mobile)
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe(() => {   
        this.isMobileView = this.breakpointObserver.isMatched(BOSCH_MEDIA_QUERIES.mobile);
      });
  }

  ngOnInit() {
    this.activatedRoute.params.pipe(takeUntil(this.componentDestroyed$)).subscribe(() => {
      this.masterDetailView.openDetails();
      
      this.activatedRoute.queryParamMap.subscribe((queryparams) => {
        this.breadcrumbsService.setTemporaryTitleForPartialRoute(this.activatedRoute.snapshot, [':id'], queryparams.get('deviceName'));
       });      

      this.dataSourceDeviceTypeInformation = new MatTableDataSource<DeviceTypeInformationModel>([
        {
          id: 2,
          name: 'Consectetur Ultricies Magna',
          manufacturer: 'Bosch Rexroth',
          overrideOwnerID: '–',
          version: '–',
        },
        { id: 3, name: 'Ultricies Fusce Curcus', manufacturer: 'Bosch Rexroth', overrideOwnerID: '–', version: '2' },
        { id: 4, name: 'Nullam Fermentum', manufacturer: 'Bosch Rexroth', overrideOwnerID: '–', version: '3' },
      ]);

      this.dataSourceCustomProperties = new MatTableDataSource<CustomPropertiesModel>([
        {
          id: 1,
          name: 'Color',
          description: 'Device color',
          unit: 'kg',
          dataType: 'String',
          dataValue: 'Red',
          mandatory: true,
        },
        {
          id: 1,
          name: 'Width',
          description: 'Device width',
          unit: 'm',
          dataType: 'Integer',
          dataValue: '100',
          mandatory: false,
        },
        {
          id: 1,
          name: 'Safe operation',
          description: "It's safe to operate",
          unit: '–',
          dataType: 'Boolean',
          dataValue: 'Yes',
          mandatory: false,
        },
        {
          id: 1,
          name: 'Expiration date',
          description: 'The day it expires',
          unit: '–',
          dataType: 'Date',
          dataValue: 'Today',
          mandatory: true,
        },
      ]);
    });
  }

  canCloseDetails(): boolean {
    return true;
  }

  closeDetails(): boolean | Observable<boolean> {
    return this.masterDetailView.closeDetails();
  }

  close() {
    this.router.navigate(['..'], { relativeTo: this.activatedRoute });
  }

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

interface DeviceTypeInformationModel {
  id: number;
  name: string;
  manufacturer: string;
  overrideOwnerID: string;
  version: string;
}

interface CustomPropertiesModel {
  id: number;
  name: string;
  description: string;
  unit: string;
  dataType: string;
  dataValue: string;
  mandatory: boolean;
}
