import { Component, Input, ViewChild, OnChanges } from '@angular/core';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { FormBuilder, FormGroup } from '@angular/forms';
export class ColumnType {
  data: any;
  title: String;
  constructor(data: any, title: String) {
    this.data = data;
    this.title = title;
  }
}
@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements  OnChanges {
  @Input() dataValue: any[];
  @Input() columnNames: any[];
  @Input() customNames: any[];
  @ViewChild('dataTable') table;
  public form: FormGroup;
  dataTable: any;
  dtOptions: any;
  tableData: any[];
  columnsName: any[];
  columnsID: any[] = [];
  columnSet: ColumnType;
  dropdownList = [];
  dropdownSettings:IDropdownSettings={};
  settings ={};
  data: any;
  title: String;
  constructor(fb:FormBuilder) {}

  ngOnChanges(): void { 
     if(this.columnNames) {
    for (let i = 0; i < this.columnNames.length; i++) {
      this.data = this.columnNames[i];
      this.title = this.customNames[i];
      this.columnsID.push(new ColumnType(this.data, this.title));
    }
    this.getDataFromSource(); }
  }

  getDataFromSource() {
    this.dataTable = $(this.table.nativeElement);
    $('#datatable').DataTable({
      data: this.dataValue,
      columns: this.columnsID,
      scrollX: true,
  });

  }

}