import { DataSource } from '@angular/cdk/collections';
import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Router, ActivatedRoute } from '@angular/router';
import moment from 'moment';
import { AuthService } from 'src/app/auth/auth.service';
import { DataRow } from 'src/app/models/dataRow.model copy';
import { DataSet } from 'src/app/models/dataSet.model';

@Component({
  selector: 'app-data-set-detail',
  templateUrl: './data-set-detail.component.html',
  styleUrls: ['./data-set-detail.component.scss']
})
export class DataSetDetailComponent {

  public form!: UntypedFormGroup;
  private document!: DataSet;

  displayedColumns = ['code', 'value', 'desc1'];
  dataSource!: MatTableDataSource<DataRow>;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(
    private fb$: UntypedFormBuilder,
    private router$: Router,
    private http$: HttpClient,
    private route$: ActivatedRoute,
    private auth$: AuthService
  ) { }

  async ngOnInit() {
    this.form = DataSet.getForm(this.fb$);
    this.document = await this.load();
    this.dataSource = new MatTableDataSource<DataRow>(this.document.dataRows);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.document.fillForm(this.form);
    this.form.disable();
  }
  private async load(): Promise<DataSet> {
      return await DataSet.getById(this.route$.snapshot.paramMap.get('id') || "", this.http$);
  }
  trackByUid(index : number, item : DataRow) {
    return item.id;
  }
}