import { Component, Input, OnInit } from '@angular/core';
import { ApplicantService } from '@core/services/auth-user/applicant.service';
import { ApplicantFromGCOrCSR, ApplicantInfo, LinkSSOApplicantPayload } from '@core/typings/applicant.typing';
import { ClientBrandingForUi } from '@core/typings/branding.typing';
import { EmployeeSSOField, EmployeeSSOFields } from '@features/employee-sso-fields/employee-sso-fields.typing';
import { DebounceFactory, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import { from } from 'rxjs';

@Component({
  selector: 'gc-link-hr-data-modal',
  templateUrl: './link-hr-data-modal.component.html',
  styleUrls: ['./link-hr-data-modal.component.scss']
})

export class LinkHRDataModalComponent extends YCModalComponent<LinkSSOApplicantPayload> implements OnInit {
  @Input() applicationId: number;
  @Input() employeeSSOFields: Record<EmployeeSSOFields, EmployeeSSOField>;
  @Input() clientBranding: ClientBrandingForUi;
  applicant: ApplicantFromGCOrCSR;
  modalHeader = this.i18n.translate(
    'GLOBAL:hdrLinkEmployeeToHRData',
    {},
    'Link Employee to HR Data'
  );
  primaryButtonText = this.i18n.translate(
    'common:btnSave',
    {},
    'Save'
  );
  cancelButtonText = this.i18n.translate(
    'common:btnCancel',
    {},
    'Cancel'
  );
  linkDescriptionText: string;
  searchPlaceholderText: string;
  formGroup: TypeSafeFormGroup<{
    externalEmployeeID: string;
    applicant: ApplicantFromGCOrCSR;
  }>;
  employeeLookupResults: ApplicantInfo[] = [];
  externalEmployeeId: string;
  debounce: DebounceFactory<any[]>;
  constructor (
    private i18n: I18nService,
    private formBuilder: TypeSafeFormBuilder,
    private applicantService: ApplicantService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }


  ngOnInit () {
    this.formGroup = this.formBuilder.group({
      externalEmployeeID: '',
      applicant: this.applicant
    });
    this.debounce = DebounceFactory.create<ApplicantInfo[]>((term: string) => {
      this.externalEmployeeId = term;

      return from(this.lookupEmployee(term));
    });
    this.setDynamicText();
  }
  async lookupEmployee (employeeId: string) {
    const result = await this.applicantService.lookupEmployee(employeeId, this.applicationId);

    return result;
  }

  onCancel () {
    this.closeModal.emit();
  }
  setDynamicText () {
    this.linkDescriptionText = this.i18n.translate(
      'common:textLinkHRDataDescription',
      {
        externalEmployeeId: (this.employeeSSOFields[EmployeeSSOFields.ExternalEmployeeId].name || this.employeeSSOFields[EmployeeSSOFields.ExternalEmployeeId].columnName),
        externalEmployeeId2: (this.employeeSSOFields[EmployeeSSOFields.ExternalEmployeeId2].name || this.employeeSSOFields[EmployeeSSOFields.ExternalEmployeeId2].columnName)
      },
      'HR data on this application cannot be accessed due to the primary applicant using a non-sso email address. If the applicant has provided a verifying number (Ex. __externalEmployeeId__ or __externalEmployeeId2__) enter it below to search for the employee\'s SSO-based email in the GrantsConnect and CSRconnect systems. If found, the employee\'s HR data will be populated and the SSO-based account will be attached to the application.'
    );
    this.searchPlaceholderText = this.i18n.translate(
      'common:textSearchByExternalEmployeeID1Or2',
      {
        externalEmployeeId: (this.employeeSSOFields[EmployeeSSOFields.ExternalEmployeeId].name || this.employeeSSOFields[EmployeeSSOFields.ExternalEmployeeId].columnName),
        externalEmployeeId2: (this.employeeSSOFields[EmployeeSSOFields.ExternalEmployeeId2].name || this.employeeSSOFields[EmployeeSSOFields.ExternalEmployeeId2].columnName)
      },
      'Search by __externalEmployeeId__ or __externalEmployeeId2__'
    );
  }

  onSubmit () {
    const payload = {
      affiliateEmployeeId: this.applicant.affiliateEmployeeId || null,
      externalEmployeeId: this.externalEmployeeId,
      applicationId: this.applicationId,
      applicantId: this.applicant.id
    };
    this.closeModal.emit(payload);
    this.analyticsService.emitEvent({
      eventName: 'Link HR data modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }
  getDisplay (applicant: ApplicantInfo) {
    return `${applicant.fullName} : ${applicant.email}`;
  }
}