import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Hotel } from '../HotelItem/hotel';
import { CurrencyPipe, NgFor, NgForOf, NgIf } from '@angular/common';
import { StarRatingComponent } from '../star-rating/star-rating.component';
import { HotelItem } from '../HotelItem/HotelItem.component';
import { catchError, EMPTY } from 'rxjs';
import { HotelFormComponent } from '../hotel-form/hotel-form.component';

@Component({
  selector: 'app-hotel-details',
  standalone: true,
  imports: [CurrencyPipe, StarRatingComponent, HotelItem, HotelFormComponent, NgIf, NgForOf],
  templateUrl: './hotel-details.component.html',
  styleUrl: './hotel-details.component.css'
})
export class HotelDetailsComponent implements OnInit {
  public hotel: any;

  constructor(private route: ActivatedRoute, private http: HttpClient, private router: Router) { }

  ngOnInit(): void {
    const routeParams = this.route.snapshot.paramMap;
    const hotelId = routeParams.get("id");

    this.http.get<Hotel>("api/hotels/" + hotelId).pipe(
      catchError(() => {
        alert("Not Found");
        this.router.navigate(["/"]);

        return EMPTY;
      })
    ).subscribe(res => {
      this.hotel = res;
    })
  }
}