import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { AddressFormGroup } from '@core/components/address-block/address-block.component';
import { ApplicantAdminUser } from '@core/typings/applicant.typing';
import { AdminUserPermissions } from '@core/typings/user.typing';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { UserService } from '@features/users/user.service';
import { EmailExtensionValidator, TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';

interface EditApplicantFormGroup {
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
  active: boolean;
  language: string;
  lastSelectedCurrency: string;
  ssoId: string;
}

@Component({
  selector: 'gc-applicant-user-modal',
  templateUrl: './applicant-user-modal.component.html',
  styleUrls: ['./applicant-user-modal.component.scss']
})
export class ApplicantUserModalComponent extends YCModalComponent<
  ApplicantAdminUser
> implements OnInit {
  @Input() user: ApplicantAdminUser;

  formGroup: TypeSafeFormGroup<EditApplicantFormGroup>;
  addressFormGroup: TypeSafeFormGroup<AddressFormGroup>;
  langKeys = this.clientSettingsService.langKeys;
  currencyOptions: TypeaheadSelectOption[] = [];
  adminPermissions = this.userService.adminPermissions;
  canEditApplicantSsoId = this.adminPermissions.includes(
    AdminUserPermissions.CanManageApplicantSsoId
  );

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private clientSettingsService: ClientSettingsService,
    private userService: UserService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.currencyOptions = this.clientSettingsService.getAllCurrencyOptions();
    this.addressFormGroup = this.formBuilder.group({
      address1: this.user?.address1 ?? '',
      address2: this.user?.address2 ?? '',
      city: this.user?.city ?? '',
      stateProvRegCode: this.user?.state ?? '',
      countryCode: this.user?.country ?? 'US',
      postalCode: this.user?.postalCode ?? ''
    });

    this.formGroup = this.formBuilder.group<EditApplicantFormGroup>({
      firstName: [this.user?.firstName ?? '', Validators.required],
      lastName: [this.user?.lastName ?? '', Validators.required],
      email: [this.user?.email ?? '', [Validators.required, EmailExtensionValidator]],
      phoneNumber: [this.user?.phoneNumber ?? ''],
      active: this.user?.isDeactivated ? false : true,
      language: [this.user?.languageCulture ?? 'en-US', Validators.required],
      lastSelectedCurrency: this.user?.lastSelectedCurrency ?? null,
      ssoId: this.user?.ssoId ?? ''
    });
  }

  submit () {
    const formVal = this.formGroup.value;
    const address = this.addressFormGroup;
    const returnValue = {
      id: this.user.id,
      firstName: formVal.firstName,
      lastName: formVal.lastName,
      email : formVal.email,
      phoneNumber: formVal.phoneNumber,
      address1: address.value.address1 ?? '',
      address2: address.value.address2 ?? '',
      city: address.value.city ?? '',
      state: address.value.stateProvRegCode ?? '',
      country: address.value.countryCode ?? '',
      postalCode: address.value.postalCode,
      active: formVal.active,
      languageCulture: formVal.language,
      lastSelectedCurrency: formVal.lastSelectedCurrency,
      ssoId: this.canEditApplicantSsoId ? formVal.ssoId : undefined
    };
    this.closeModal.emit(returnValue);
    this.analyticsService.emitEvent({
      eventName: 'Save applicant user',
      eventType: EventType.Click,
      extras: null
    });
  }
}