import {Component, inject} from "@angular/core";
import {HotelComponent} from "./hotel.component";
import {Hotel} from "./hotel";
import {FormsModule} from "@angular/forms";
import {Lang} from "../idek/lang";
import {HotelService} from "../service/hotel.service";
import {Observable} from "rxjs";
import {AsyncPipe} from "@angular/common";
import {CurrencyComponent} from "../currency/currency.component";

@Component({
  standalone: true,
  template: `
    <app-currency (currency)="currency = $event"></app-currency>
    <form>
      <input name="search" [ngModel]="search" (ngModelChange)="searchEvent($event)">
    </form>
    @for (hotel of (matchingHotels | async); track hotel.hotelId) {
        <app-hotel [hotel]="hotel" [currency]="currency"></app-hotel>
        <hr>
    } @empty {
      <h1>no matching results for {{search}}</h1>
    }
  `,
  imports: [FormsModule, HotelComponent, AsyncPipe, CurrencyComponent],
  providers: [HotelService],
  selector: 'app-hotels'
})
export class HotelsComponent {

  public currency: Lang = {name: 'de', code: 'de-DE', currency: 'EUR'};

  public search: string = '';

  private hotelService: HotelService= inject(HotelService);

  public matchingHotels: Observable<Hotel[]> = this.hotelService.getHotels();

  public searchEvent(input: string) {
    this.search = input.toLowerCase();
    //this.matchingHotels.pipe(filter((hotel: Hotel) => hotel.hotelName.toLowerCase().includes(input.toLowerCase())));
  }
}