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,
  ) {}

  delete(): void {
    if (confirm('Are u sure u want to delete this hotel')) {
      this.http
        .delete<Hotel>('/api/hotels/' + this.route.snapshot.paramMap.get('id'))
        .subscribe();
      this.router.navigate(['/']);
    }
  }

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