import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { ApplicantFromSearch } from '@core/typings/applicant.typing';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { Subscription } from 'rxjs';
interface ApplicantFormGroup {
  firstName: string;
  lastName: string;
  isEmployeeOfClient: boolean;
}

@Component({
  selector: 'gc-applicant-selector',
  templateUrl: './applicant-selector.component.html',
  styleUrls: ['./applicant-selector.component.scss']
})
export class ApplicantSelectorComponent implements OnInit, OnDestroy {
  @Output() onApplicantSelected = new EventEmitter<ApplicantFromSearch>();
  @Output() onNewApplicantChange = new EventEmitter<ApplicantFromSearch>();
  @Output() onValidityChange = new EventEmitter<boolean>();

  selectedApplicant: ApplicantFromSearch;
  newApplicant: ApplicantFromSearch;
  newApplicantEmailAddress = '';
  showCreate = false;
  clientName = this.clientSettingsService.clientBranding.name;
  createApplicantFormGroup: TypeSafeFormGroup<ApplicantFormGroup>;
  sub = new Subscription();
  isValidEmail = false;
  showEmployeeCheckbox = this.clientSettingsService.showIsEmployeeOfClientCheckbox;

  constructor (
    private clientSettingsService: ClientSettingsService,
    private formBuilder: TypeSafeFormBuilder
  ) { }

  ngOnInit () {
    this.createApplicantFormGroup = this.formBuilder.group<ApplicantFormGroup>({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      isEmployeeOfClient: false
    });
    this.sub.add(this.createApplicantFormGroup.valueChanges.subscribe(() => {
      if (this.showCreate) {
        this.setNewApplicant();
      } else {
        this.clearNewApplicant();
      }
    }));
  }


  onNoResults (searchTerm: string) {
    this.showCreate = !!searchTerm;

    if (this.showCreate) {
      this.setNewApplicant();
    } else {
      this.clearSelectedApplicant();
    }
  }

  setNewApplicant () {
    const formValue = this.createApplicantFormGroup.value;
    this.newApplicant = {
      firstName: formValue.firstName,
      lastName: formValue.lastName,
      phoneNumber: null,
      isEmployeeOfClient: this.clientSettingsService.getIsEmployeeOfClientForPayload(
        formValue.isEmployeeOfClient
      ),
      email: this.newApplicantEmailAddress
    };
    this.setValidity();
    this.emitNewApplicantChange();
  }

  clearNewApplicant () {
    this.newApplicant = null;
    this.setValidity();
    this.emitNewApplicantChange();
  }

  setSelectedApplicant (selectedApplicant: ApplicantFromSearch) {
    this.showCreate = false;
    this.selectedApplicant = selectedApplicant;
    this.emitApplicantSelected();
    this.clearNewApplicant();
  }

  clearSelectedApplicant () {
    this.selectedApplicant = null;
    this.setValidity();
    this.emitApplicantSelected();
  }

  onTermChange (searchTerm: string) {
    this.newApplicantEmailAddress = searchTerm;
    if (this.showCreate) {
      this.setNewApplicant();
    } else {
      this.clearNewApplicant();
    }
    if (!searchTerm && !this.selectedApplicant) {
      this.resetAddForm();
    }
    this.setValidity();
  }

  setValidity () {
    const control = new FormControl(this.newApplicantEmailAddress, Validators.email);
    this.isValidEmail = control.valid;
    if (this.showCreate) {
      this.onValidityChange.emit(
        this.isValidEmail && !this.createApplicantFormGroup.invalid
      );
    } else {
      this.onValidityChange.emit(!!this.selectedApplicant);
    }
  }

  resetAddForm () {
    this.clearSelectedApplicant();
    this.showCreate = false;
    this.clearNewApplicant();
    this.createApplicantFormGroup.setValue({
      firstName: '',
      lastName: '',
      isEmployeeOfClient: false
    });

    setTimeout(() => {
      this.clearSelectedApplicant();
    });
    this.setValidity();
  }

  emitApplicantSelected () {
    this.onApplicantSelected.emit(this.selectedApplicant);
  }

  emitNewApplicantChange () {
    this.onNewApplicantChange.emit(this.newApplicant);
  }

  ngOnDestroy () {
    this.sub.unsubscribe();
  }
}