import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AdminUsersService } from '@core/services/admin-users.service';
import { AdminFromSearch } from '@core/typings/user.typing';
import { DebounceFactory, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { from } from 'rxjs';

@Component({
  selector: 'gc-search-admin-active-directory',
  templateUrl: './search-admin-active-directory.component.html',
  styleUrls: ['./search-admin-active-directory.component.scss']
})
export class SearchAdminActiveDirectoryComponent implements OnInit {
  @Input() placeholder = '';
  @Input() showNoResults = true;
  @Input() showEmailAddress = true;
  @Output() onAdminSelect = new EventEmitter<AdminFromSearch>();
  @Output() onNoResults = new EventEmitter();
  @Output() onTermChange = new EventEmitter();
  formGroup: TypeSafeFormGroup<{ term: string }>;
  results: AdminFromSearch[];
  debounce: DebounceFactory<any[]>;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private adminUserService: AdminUsersService
  ) { }

  ngOnInit () {
    this.formGroup = this.formBuilder.group<{ term: string }>({
      term: ['']
    });
    this.debounce = DebounceFactory.create<AdminFromSearch[]>((term: string) => {
      return from(this.doSearch(term));
    });
    this.getDisplay = this.getDisplay.bind(this);
  }

  adminSelected (admin: AdminFromSearch) {
    this.onAdminSelect.emit(admin);
  }

  doSearch (term: string) {
    return this.adminUserService.searchActiveDirectory(term);
  }

  getDisplay (admin: AdminFromSearch) {
    return `${admin.firstName} ${admin.lastName} (${admin.email})`;
  }
}