import { Component, inject, output } from '@angular/core';
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { FilterComponent } from '@app/shared/features/filter/filter.component';
import { SearchFilters } from '@app/domain/search-filters';
import { NgTemplateOutlet } from '@angular/common';

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [ReactiveFormsModule, FilterComponent, NgTemplateOutlet],
  templateUrl: './search.component.html',
  styleUrl: './search.component.scss',
})
export class SearchComponent {
  onSearchChange = output<SearchFilters>();
  private formBuilder: FormBuilder = inject(FormBuilder);

  // Filtres
  filters: SearchFilters = {
    search: '',
    verified: false,
    secteur: null,
    profession: null,
    sort: 'recent',
  };

  searchForm = this.formBuilder.group({
    search: new FormControl('', Validators.required),
  });

  onSubmit() {
    const search = this.searchForm.value.search?.toLowerCase()!;
    this.onSearchChange.emit({ ...this.filters, search });
  }

  onFiltersChanged(event: SearchFilters) {
    this.filters = event;
  }
}