import { Component } from '@angular/core';
import { ISCommonService } from '../iscommon.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 {
  infoFilter?:string;
  
  kvDatasources:KeyValueDatasource[] = [];
  moduleDatasource:MatTableDataSource<Module[]> = new MatTableDataSource<Module[]>([]); 

  displayedKVColumns: string[] = ['k', 'v'];
  displayedModuleColumns: string[] = ['group', 'name', 'versions', 'files'];
 
  constructor(public service:ISCommonService)  {
    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;
  }
  
  getFilteredInfo(data:any[]) {
    if (this.infoFilter) {
      return data.filter(obj => {
        return Object.keys(obj).reduce((acc, curr) => {            
            return acc || obj[curr].toString().toLowerCase().includes(this.infoFilter);
        }, false);
      })
    }
    else
    return data
    
  }

}