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-flight-dialog',
  templateUrl: './reservation-flight-dialog.component.html',
  styleUrls: ['./reservation-flight-dialog.component.scss']
})
export class ReservationFlightDialogComponent 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';

  legs: 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<ReservationFlightDialogComponent>,
    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({
      flightId: new FormControl({ disabled: this.mode === 'view' })

    });
    if (this.record) {
      this.form.controls['flightId'].setValue(this.record.flightId);

    } 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.legs)
  }


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

  details(id: any) {
    this.legs = id;
  }

}
