import { Component, OnInit } from '@angular/core';
import { NbDialogRef } from '@nebular/theme';
import { FancyColumn } from '../fancy-row-column.model';
import { FancySettings } from '../fancy-settings.model';

@Component({
  selector: 'ngx-multi-record-picker-dlg',
  templateUrl: './multi-record-picker-dlg.component.html',
  styleUrls: ['./multi-record-picker-dlg.component.scss']
})
export class MultiRecordPickerDlgComponent<T> implements OnInit {

  isLoading = true;
  ids: string[] = [];
  title: string;
  idColumn: string;
  data: T[] = [];
  displayFunc: (item: T) => string;
  setting: FancySettings = <FancySettings<T>>{
    columns: [
      {
        name: 'uiCheck',
        title: '',
        type: 'checkall',
        widthPx: 50,
        //valuePrepareFunction: (item) => ,
      },
      {
        name: 'description',
        title: 'Description',
        type: 'string',
        widthPct: 90,
        valuePrepareFunction: (item) => this.displayFunc(item),
      },
    ]
  }
  constructor(
    private dlgRef: NbDialogRef<MultiRecordPickerDlgComponent<T>>
  ) { }

  ngOnInit(): void {
    // this.setting.columns =
    //   [
    //     {
    //       name: 'uiCheck',
    //       title: '',
    //       type: 'checkall',
    //       widthPx: 50,
    //       //valuePrepareFunction: (item) => ,
    //     } as FancyColumn,
    //   ].concat(this.setting.columns);

    for (let i = 0; i < this.data.length; i++) {
      const datum = this.data[i];
      datum['uiCheck'] = this.ids.includes(datum[this.idColumn]);
    }
    this.isLoading = false;
  }
  update() {
    this.dlgRef.close(this.data.filter(d => d['uiCheck']));
  }
  close() {
    this.dlgRef.close(null);
  }

}
