import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { AddEditUser } from '@core/typings/client-user.typing';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { EmailExtensionValidator, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';

@Component({
  selector: 'gc-add-edit-user-modal',
  templateUrl: 'add-edit-user-modal.component.html',
  styleUrls: ['./add-edit-user-modal.component.scss']
})

export class AddEditUserModalComponent extends YCModalComponent<AddEditUser> implements OnInit {
  @Input() existingUser: AddEditUser;
  formGroup: TypeSafeFormGroup<AddEditUser>;
  hasSSO = this.clientSettingsService.clientSettings.hasSSO;
  modalHeader: string;
  createUserHeader = this.i18n.translate(
    'USERS:hdrCreateUser',
    {},
    'Create User'
  );
  editUserHeader = this.i18n.translate(
    'USERS:hdrEditUser',
    {},
    'Edit User'
  );
  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private clientSettingsService: ClientSettingsService,
    private analyticsService: AnalyticsService,
    private i18n: I18nService
  ) {
    super();
  }

  ngOnInit () {
    this.formGroup = this.formBuilder.group<AddEditUser>({
      firstName: [
        this.existingUser?.firstName || '',
        [Validators.required, Validators.maxLength(50)]
      ],
      lastName: [
        this.existingUser?.lastName || '',
        [Validators.required, Validators.maxLength(50)]
      ],
      jobTitle: [
        this.existingUser?.jobTitle || '',
        [Validators.required, Validators.maxLength(50)]
      ],
      email: [
        this.existingUser?.email || '', [
          Validators.required,
          EmailExtensionValidator,
          Validators.maxLength(254)
        ]
      ],
      isSSO: this.existingUser?.isSSO || false
    });
    this.modalHeader = this.existingUser ? this.editUserHeader : this.createUserHeader;
  }
  onCancel () {
    this.closeModal.emit();
  }

  onSubmit () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: this.existingUser ? 'Edit user submit' : 'Add user submit',
      eventType: EventType.Click,
      extras: null
    });
  }
}