import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ApplicantService } from '@core/services/auth-user/applicant.service';
import { PortalDeterminationService } from '@core/services/portal-determination.service';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { DebounceFactory, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { from } from 'rxjs';
import { ApplicantFromSearch } from '../../typings/applicant.typing';

@Component({
  selector: 'gc-search-applicant-autocomplete',
  templateUrl: './search-applicant-autocomplete.component.html',
  styleUrls: ['./search-applicant-autocomplete.component.scss']
})
export class SearchApplicantAutocompleteComponent {
  @Input() clearOnBlur = true;
  @Input() placeholder = '';
  @Input() showNoResults = true;
  @Input() showEmailAddress = true;
  @Output() onApplicantSelect = new EventEmitter();
  @Output() onNoResults = new EventEmitter<string>();
  @Output() onTermChange = new EventEmitter<string>();

  formGroup: TypeSafeFormGroup< { term: string }>;
  results: ApplicantFromSearch[];
  counter = 0;
  debounce: DebounceFactory<any[]>;

  constructor (
    public fb: TypeSafeFormBuilder,
    private applicantService: ApplicantService,
    private clientSettingsService: ClientSettingsService,
    private portal: PortalDeterminationService
  ) {
    this.formGroup = fb.group({
      term: ''
    });
    this.debounce = DebounceFactory.create<any[]>((term: string) => {
      return from(this.doSearch(term));
    }, 1000);
    this.getDisplay = this.getDisplay.bind(this);
  }

  get clientBranding () {
    return this.clientSettingsService.get('clientBranding');
  }

  get isManager () {
    return this.portal.isManager;
  }

  applicantSelected (applicant: ApplicantFromSearch) {
    this.formGroup.get('term').setValue('');
    this.onApplicantSelect.emit(applicant);
  }

  async doSearch (searchText: string) {
    const payload = this.applicantService.adaptApplicantSearchPayload(searchText);
    const applicants = await this.applicantService.searchApplicants(payload);
    if (applicants) {
      return applicants;
    }

    return [];
  }

  getDisplay (applicant: ApplicantFromSearch) {
    return `
      ${applicant.firstName} ${applicant.lastName}
    `;
  }
}