import { Component, OnInit } from '@angular/core';
import { Pasajero } from '../../../pasajeros/interfaces/pasajeros.inteface';
import { PageEvent } from '@angular/material/paginator';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { PasajerosService } from '../../../pasajeros/services/pasajeros.service';
import { VuelosService } from '../../../vuelos/services/vuelos.service';
import { EscalasService } from '../../../vuelos/services/escalas.service';
import { ReservasService } from '../../../reservas/services/reservas.service';

@Component({
  selector: 'app-detalles',
  templateUrl: './detalles.component.html',
  styleUrls: ['./detalles.component.css']
})
export class DetallesComponent implements OnInit{

  id: number = 0;
  idVuelo: any;
  pasajero: Pasajero | undefined;
  vuelosModal: any[] = [];
  escalasVuelo: any[] = [];

  reservaForm: FormGroup = this.formBuilder.group({
    diaReservacion: [ '' ],
    estado: [ ''],
    pasajeroId: [ '' ],
    idVuelo: [ '' ],
  })

  constructor(
    private formBuilder: FormBuilder,
    private activateRoute: ActivatedRoute,
    private reservasService: ReservasService,
    private pasajeroService: PasajerosService,
  ){}  

  ngOnInit(): void {
    this.id = this.activateRoute.snapshot.params['id'];
    this.llenarFormulario();  
    this.getPasajero();
  }

  private llenarFormulario(){
    this.reservasService.getReserva(this.id).subscribe(
      res => {
        this.getEscalasVuelo();
        this.reservaForm.patchValue(res);
      },err => {
      }
    )
  }

  getPasajero(){
    this.pasajeroService.getPasajero(this.id).subscribe(
      res => {
        this.pasajero = res;
      }
    )
  }

  getEscalasVuelo(){
    this.reservasService.getReserva(this.id).subscribe(
      res => {
        this.escalasVuelo = res.escalas;
      }
    )
  }

}
