import {
  Component,
  ElementRef,
  OnDestroy,
  OnInit,
  ViewChild,
  ViewEncapsulation,
  AfterViewInit
} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { takeUntil } from 'rxjs/internal/operators';

import { MatTableDataSource } from '@angular/material/table';

import { fuseAnimations } from 'src/@fuse/animations';
import { FuseUtils } from 'src/@fuse/utils';
import { BankInfoDataSource } from './list.data-source';
import { BankInfoService } from 'src/modules/sites/bank-info/service/bank-info.service';
import {
  FormGroup,
  FormBuilder,
  Validators,
  FormArray,
  FormControl
} from '@angular/forms';

@Component({
  selector: 'app-page-sites-bank-info-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: fuseAnimations,
  encapsulation: ViewEncapsulation.None
})
export class ListComponent implements OnInit, OnDestroy, AfterViewInit {
  dataSource: BankInfoDataSource | null;
  displayedColumns = ['id', 'name', 'number', 'holder', 'description'];
  bankInfoForm: FormGroup;
  bankInfoFormArray: FormArray;

  @ViewChild('filter', { static: true })
  filter: ElementRef;

  // Private
  private _unsubscribeAll: Subject<any>;

  constructor(
    private bankInfoService: BankInfoService,
    private fb: FormBuilder
  ) {
    this._unsubscribeAll = new Subject();
  }

  ngOnInit() {
    this.dataSource = new BankInfoDataSource(this.bankInfoService);

    this.bankInfoForm = this.fb.group({
      items: this.createFormArray()
    });
  }

  createFormArray(): FormArray {
    return new FormArray(
      this.dataSource[0](
        item =>
          new FormGroup({
            id: new FormControl(item.id),
            name: new FormControl(item.name, [Validators.required]),
            number: new FormControl(item.number, [Validators.required]),
            holder: new FormControl(item.holder, [Validators.required]),
            description: new FormControl(item.description, [
              Validators.required
            ])
          })
      )
    );
  }
  /**
   * On destroy
   */
  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this._unsubscribeAll.next();
    this._unsubscribeAll.complete();
  }

  ngAfterViewInit(): void {}

  bankInfoUpdate(): void {}
}
