import { Component, OnInit, ViewChild, Inject, HostListener } from '@angular/core';
import { ColumnTemplate } from '@xdf/gallery';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { MatTableDataSource } from '@angular/material/table';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { NotificationService } from '@xdf/commons';
import { TranslateService } from '@ngx-translate/core';
import { ReservacionesService } from '../../services/reservaciones.service';

@Component({
  selector: 'byte-reservation-vuelo-dialog',
  templateUrl: './reservation-vuelo-dialog.component.html',
  styleUrls: ['./reservation-vuelo-dialog.component.scss']
})
export class ReservationVueloDialogComponent implements OnInit {



  columnTemplateArray : ColumnTemplate[] = [
    {
      name: 'fechaLlegada',
      sortable: false,
      title: 'tax.rate.header.effectiveDate',
      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: 'tax.rate.header.effectiveDate',
      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: 'rate',
      sortable: false,
      title: 'tax.rate.header.rate',
      visible: true,
      filtable: true,
      style: { width: '30%' },
      type: 'number',
      aliasName: null,
      queryName: null,
      responsive: null,
      styles: null,
      values: null,
      digitsInfo: null,
      dateFormat: null,
      colStyle: null
    }
  ];
  decimalParameter = 2;

  @ViewChild('paginator',{static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;

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

  escalas: any;

  form: FormGroup;
  logoSrc: any;
  minDate: Date;
  record: any;
  mode: any;
  title = "dialog_rate_new_title"
  aeropuertos: any[] = [];
  
  displayedColumns: string[] = ['id', 'agente','pasajero', 'monto'];
  dataSource!: MatTableDataSource<any>;

  constructor(
    public dialogRef: MatDialogRef<ReservationVueloDialogComponent>,
    private formBuilder :FormBuilder,
    private notificationService: NotificationService,
    private translate: TranslateService,
    private reservacionesService: ReservacionesService,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.record = data.record;
    this.mode = data.mode;
    this.minDate = data.minDate;

  }

  ngOnInit() {

    this.getReservas();

    this.logoSrc = "assets/images/logo_byte_menu-min.png";
      this.form = this.formBuilder.group({
        vueloId:  new FormControl({ disabled: this.mode === 'view'})

      }); 
      console.log(this.record);
      if(this.record){
        this.form.controls['vueloId'].setValue(this.record.vueloId);

      }else{
        this.form.controls['codigoAeropuertoOrigen'].setValue('');
        this.form.controls['codigoAeropuertoDestino'].setValue('');

      }
  }

  @HostListener('window:keyup.esc') onKeyUp() {
    this.dialogRef.close(null);
  }
  close() {
    this.dialogRef.close(null);
  }
  save(){
    this.dialogRef.close(this.escalas)
  }


  public getReservas(){
    this.reservacionesService.getVuelos().subscribe(
      res => {
        this.dataSource = new MatTableDataSource(res);
        this.dataSource.paginator = this.paginator;  
        this.dataSource.sort = this.sort;
      }
    )
  }

  detalles(id: any){
    this.escalas=id;
    console.log(id);
  }
  
}
