import { Component, inject, OnInit } from '@angular/core';
import { SearchComponent } from '@app/shared/features/search/search.component';
import { VerticalProfileListComponent } from '@app/shared/components/vertical-profile-list/vertical-profile-list.component';
import { UntilDestroy } from '@ngneat/until-destroy';
import { ProfileFacade } from '@app/ui/profiles/profile.facade';
import { LoadingComponent } from '@app/shared/components/loading/loading.component';
import { Router } from '@angular/router';

@Component({
  selector: 'app-profile-list',
  standalone: true,
  imports: [SearchComponent, VerticalProfileListComponent, LoadingComponent],
  templateUrl: './profile-list.component.html',
  styleUrl: './profile-list.component.scss',
})
@UntilDestroy()
export class ProfileListComponent implements OnInit {
  private readonly facade = inject(ProfileFacade);
  private readonly router = inject(Router);

  protected readonly profiles = this.facade.profiles;
  protected readonly loading = this.facade.loading;
  protected readonly error = this.facade.error;

  ngOnInit() {
    this.facade.load();
  }

  showNewQuery(newQuery: string) {
    this.router.navigate(['/profiles'], { queryParams: { search: newQuery } });
  }
}
