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

@Component({
  selector: 'byte-reservation-pasajero-dialog',
  templateUrl: './reservation-pasajero-dialog.component.html',
  styleUrls: ['./reservation-pasajero-dialog.component.scss']
})
export class ReservationPasajeroDialogComponent 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';

  pasajero: 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<ReservationPasajeroDialogComponent>,
    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({
        pasajeroId:  new FormControl({ disabled: this.mode === 'view'}),
      }); 
      console.log(this.record);
      if(this.record){
        this.form.controls['pasajeroId'].setValue(this.record.pasajeroId);

      }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.pasajero);
  }


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

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

}
