import { Component, OnInit } from '@angular/core';
import { Lehrling } from '../lehrling';
import { LehrlingService } from '../services/lehrling.service';
import { Kompetenz } from '../kompetenz';
import { KompetenzService } from '../services/kompetenz.service';
import { Pruefung } from '../Pruefung';
import { PruefungService } from '../services/pruefung.service';
import { Observable } from 'rxjs';
import { MatTable, MatTableDataSource} from '@angular/material/table';
import { AfterViewInit,  ViewChild} from '@angular/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatPaginator} from '@angular/material/paginator';
import { MatSortModule, Sort } from '@angular/material/sort';
import { MatSort } from '@angular/material/sort';
import {MatTabsModule} from '@angular/material/tabs';
@Component({
  selector: 'app-dash',
  templateUrl: './dash.component.html',
  styleUrls: ['./dash.component.css']
})
export class DashComponent implements OnInit, AfterViewInit {

  public lehrlinge: any;
  public kompetenzen: any;
  public pruefungen: any;
  public widget: any;
  selectedLehrling: Lehrling | null = null;
  public datasource: MatTableDataSource<Lehrling>;
  
  displayedColumns: string[] = ['apprenticeid', 
                                'firstname',
                                'lastname',
                                'groupname',
]
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
private _liveAnnouncer: any;

  constructor(private Lehrlinge: LehrlingService, private Kompetenz: KompetenzService, private Pruefung: PruefungService) { }

  ngOnInit(): void {
    this.Lehrlinge.getLehrlinge().subscribe(
      (
        data: any) => {
        console.log(data);
        this.lehrlinge = data.apprentice;
        this.datasource = new MatTableDataSource<Lehrling>(this.lehrlinge);
        this.datasource.paginator = this.paginator;
    })
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.datasource.filter = filterValue.trim().toLowerCase();
  }

  ngAfterViewInit() {
    this.datasource = new MatTableDataSource<Lehrling>(this.lehrlinge);
    this.datasource.paginator = this.paginator;
  }

  @ViewChild('TABLE') table: MatTable<Lehrling>;

  setSelectedItem(widget: any): void {

  }

   /** Announce the change in sort state for assistive technology. */
   announceSortChange(sortState: Sort) {
    // This example uses English messages. If your application supports
    // multiple language, you would internationalize these strings.
    // Furthermore, you can customize the message to add additional
    // details about the values being sorted.
    if (sortState.direction) {
      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
    } else {
      this._liveAnnouncer.announce('Sorting cleared');
    }
  }


}