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

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

  
  columnTemplateArray : ColumnTemplate[] = [
    {
      name: 'arrivalDate',
      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: 'departureDate',
      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 = 'arrivalDate';

  passenger: any;

  form: FormGroup;
  logoSrc: any;
  minDate: Date;
  record: any;
  mode: any;
  title = "dialog_rate_new_title"
  airports: any[] = [];
  
  displayedColumns: string[] = ['id', 'agent','passenger', 'amount'];
  dataSource!: MatTableDataSource<any>;

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

  }

  ngOnInit() {

    this.getReservations();

    this.logoSrc = "assets/images/logo_byte_menu-min.png";
      this.form = this.formBuilder.group({
        passengerId:  new FormControl({ disabled: this.mode === 'view'}),
      }); 
      console.log(this.record);
      if(this.record){
        this.form.controls['passengerId'].setValue(this.record.passengerId);

      }else{
        this.form.controls['codeAirportOrigin'].setValue('');
        this.form.controls['codeAirportDestination'].setValue('');

      }
  }

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


  public getReservations(){
    this.reservationsService.getPassengers().subscribe(
      res => {
        this.dataSource = new MatTableDataSource(res);
        this.dataSource.paginator = this.paginator;  
        this.dataSource.sort = this.sort;
      }
    )
  }

  details(id: any){
    
    this.passenger = id;
    console.log(id);
  }
}
