import { Component, input } from '@angular/core';
import { HotelItem } from './HotelItem/HotelItem.component';
import { SearchComponent } from './Search/search.component';
import { AsyncPipe, UpperCasePipe } from '@angular/common';
import { TextPipe } from '../text.pipe';
import { HotelService } from './Parent/services/hotel.service';
import { inject } from '@angular/core';
import { filter, map, Observable, range } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HotelItem, SearchComponent, UpperCasePipe, TextPipe, AsyncPipe],
  templateUrl: './app.component.html',
  providers: [HotelService],
  styleUrl: './app.component.css'
})
export class AppComponent {
  public search: string = "";
  public hotelService: HotelService = inject(HotelService);

  ngOnInit() {
    const stream: Observable<number> = range(1, 10);

    stream.pipe(
      filter((value: number) => value % 2 === 1),
    ).subscribe((value) => console.log(value));
    console.log('---')

    stream.pipe(
      map((value: number) => value * 2)
    ).subscribe((value) => console.log(value));
  }

  public test() {
    8
    console.log(this.search);
  }

  public hotels = this.hotelService.getHotels();
  public foundHotels = this.hotels.pipe(
    filter((hotel) => hotel.hotelName.includes(this.search)),
  )
}