import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { HotelComponent } from './hotel.component';
import { Hotel } from '../model/hotel';
import { FormsModule } from '@angular/forms';
import { Lang } from '../../currency/lang';
import { HotelService } from '../service/hotel.service';
import { Observable } from 'rxjs';
import { AsyncPipe, NgIf } from '@angular/common';
import { CurrencyComponent } from '../../currency/currency.component';
import { RouterLink } from '@angular/router';
import { StarComponent } from './star.component';

@Component({
  standalone: true,
  template: `
    <app-currency (currency)="currency = $event"></app-currency>
    <form>
      <input
        name="search"
        [ngModel]="search"
        (ngModelChange)="searchEvent($event)"
      />
    </form>
    <p routerLink="/hotels/new">Create Hotel</p>
    @for (hotel of matchingHotels | async; track hotel.id) {
      <div *ngIf="hotel.hotelName.toLowerCase().includes(search)">
        <div>{{ hotel.hotelName }}</div>
        <img
          src="{{ hotel.imageUrl }}"
          alt="{{ hotel.hotelName }}"
          height="64"
          width="64"
        />
        <br />
        <button routerLink="{{ hotel.id }}">Details</button>
        <hr />
      </div>
    } @empty {
      <h1>no matching results for {{ search }}</h1>
    }
  `,
  imports: [
    FormsModule,
    HotelComponent,
    AsyncPipe,
    CurrencyComponent,
    RouterLink,
    StarComponent,
    NgIf,
  ],
  providers: [HotelService],
  selector: 'app-hotels',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
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();
  }
}