import { Component } from '@angular/core';
import { ISService } from '../is.service';
import { MatTableDataSource } from '@angular/material/table';

export interface KeyValue {
  k: string;
  v: string;
}

export interface Module {
  group: string;
  name: string;
  versions: string[];
  files: string[];
}

export interface KeyValueDatasource {
  name: string;
  datasource: MatTableDataSource<any>;
}

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
})
export class InfoComponent {
  
  kvDatasources:KeyValueDatasource[] = [];
  moduleDatasource:MatTableDataSource<Module> = new MatTableDataSource<Module>([]); 

  displayedKVColumns: string[] = ['k', 'v'];
  displayedModuleColumns: string[] = ['group', 'name', 'versions', 'files'];
 
  constructor(public service:ISService)  {
    this.service.loadInfo().subscribe({
      next:(data:any[]) => {
        data.forEach(section => {
          if (section['name'] == 'Modules') {
            this.moduleDatasource.data = section['data'];
          } else {
            this.kvDatasources.push({
              name: section['name'],
              datasource :  new MatTableDataSource(section['data'])
            });
          }
        })
      },
      error:error => console.log(error),
      complete:()=>console.log("Completed")
    })
  }

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

}