import { Component, inject } 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';
import { SearchFilters } from '@app/domain/search/search-filters';
import { FilterComponent } from '@app/shared/features/filter/filter.component';
import { PaginationComponent } from '@app/shared/features/pagination/pagination.component';

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

  protected readonly searchFilters = this.facade.searchFilters;
  protected readonly profilePaginated = this.facade.profilePaginated;
  protected readonly loading = this.facade.loading;
  protected readonly error = this.facade.error;

  showNewQuery(filters: SearchFilters) {
    this.facade.load(filters);
    this.router.navigate(['/profiles'], { queryParams: { search: filters.search } });
  }

  onFilterChange(filters: SearchFilters) {
    this.facade.load(filters);
  }

  onPageChange(filters: SearchFilters) {
    this.facade.load(filters);
  }
}