import {DecimalPipe} from '@angular/common';
import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import {ColumnTemplate} from '@xdf/gallery';
import * as moment from 'moment';



import { TaxRateDialogService } from '../vuelo-escala-dialog/services/vuelo-escala-dialog.service';
import { MatDialog } from '@angular/material/dialog';
import { VueloEscalaDialogComponent } from '../vuelo-escala-dialog/vuelo-escala-dialog.component';
import { VueloDialogPruebaComponent } from '../vuelo-dialog-prueba/vuelo-dialog-prueba.component';

@Component({
  selector: 'byte-vuelo-escalas-grid',
  templateUrl: './vuelo-escalas-grid.component.html',
  styleUrls: ['./vuelo-escalas-grid.component.scss']
})
export class VueloEscalasGridComponent implements OnInit, AfterViewInit {


  @Input() mode;
  
  columnTemplateArray : ColumnTemplate[] = [
    {
      name: 'fechaLlegada',
      sortable: false,
      title: 'Fecha Salida',
      visible: true,
      filtable: true,
      style: { width: '30%' },
      type: 'date',
      aliasName: null,
      queryName: null,
      responsive: null,
      styles: null,
      values: null,
      digitsInfo: null,
      dateFormat: null,
      colStyle: null
    },
    {
      name: 'fechaSalida',
      sortable: false,
      title: 'Fecha Llegada',
      visible: true,
      filtable: true,
      style: { width: '30%' },
      type: 'date',
      aliasName: null,
      queryName: null,
      responsive: null,
      styles: null,
      values: null,
      digitsInfo: null,
      dateFormat: null,
      colStyle: null
    }
  ];
  decimalParameter = 2;

  dataSource: MatTableDataSource<any>;
  displayedColumns = new Array<string>();
  @ViewChild('paginator',{static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;

  sortDirection = 'desc';
  sortColumn = 'fechaLlegada';

  
  constructor(
    private taxRateDialogService : TaxRateDialogService,
    private decimalPipe : DecimalPipe,
  ) {
   }
  ngAfterViewInit(): void {
    this.paginator.pageSize = 5
    this.dataSource.paginator = this.paginator
    this.sort.sortChange.subscribe(() => {
      console.log()
    })
  }

  autoSort(data) {
    return data.sort((a, b) => new Date(a.fechaLlegada) < new Date(b.fechaLlegada) ? 1 : -1)
  }

  numberWithCommas(x): string {
    return x ? this.decimalPipe.transform(x, '1.'+this.decimalParameter+'-'+this.decimalParameter) : '';
  }

  getDateFormat(liquidationDate) {
    return moment(liquidationDate).format('DD-MM-YYYY');
  }

  ngOnInit(): void {
    this.dataSource = new MatTableDataSource<any>();
    this.columnTemplateArray.forEach((column) => {
      console.log(this.dataSource);
        this.displayedColumns.push(column.name);
      }
    );
    this.displayedColumns.push('actions');
  }

  onEdit(item) {
    this.taxRateDialogService.loadComponent(item, this.mode, this.getMaxDate()).subscribe(
      data => {
        if(data !== null) {
          let dataSource = [...this.dataSource.data];
          let pos = dataSource.findIndex(x => x === item)
          dataSource[pos] = data;
          this.dataSource.data = this.autoSort(dataSource);;
        }
      }
    )
  }

  onDelete(item) {
    let dataSource = [...this.dataSource.data];
    let pos = dataSource.findIndex(x => x === item)
    dataSource.splice(pos, 1)
    this.dataSource.data = this.autoSort(dataSource);;
  }

  getMaxDate() {
    let maxDate 
    if(this.dataSource.data.length > 0) {
      maxDate = new Date(Math.max.apply(null,this.dataSource.data.map(x => new Date(x.fechaLlegada))));
      maxDate.setDate(maxDate.getDate() + 1);
    } else {
      maxDate = new Date();
    }
    return maxDate;
  }

  onCreate() {
    this.taxRateDialogService.loadComponent(null, this.mode, this.getMaxDate()).subscribe(
      data => {
        if(data !== null) {
          let dataSource = this.dataSource.data.slice();
          dataSource.push(data);
          console.log(data);
          this.dataSource.data = this.autoSort(dataSource);;
        }
      }
    )
  }

  
}
