import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { GrantManagerModalResponse, GrantManagerUser } from '@core/typings/grant-manager.typing';
import { EmailExtensionValidator, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';

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

  formGroup: TypeSafeFormGroup<GrantManagerModalResponse>;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.setupFormGroup();
  }

  setupFormGroup () {
    this.formGroup = this.formBuilder.group<GrantManagerModalResponse>({
      firstName: [
        this.user ? this.user.firstName : '',
        Validators.required
      ],
      lastName: [
        this.user ? this.user.lastName : '',
        Validators.required
      ],
      jobTitle: [
        this.user ? this.user.jobTitle : ''
      ],
      email: [
        this.user ? this.user.email : '',
        [Validators.required, EmailExtensionValidator]
      ],
      isSso: [
        this.user ? this.user.isSso : false
      ]
    });
  }

  submit () {
    const returnValue: GrantManagerModalResponse = {
      firstName: this.formGroup.value.firstName,
      lastName: this.formGroup.value.lastName,
      email: this.formGroup.value.email,
      jobTitle: this.formGroup.value.jobTitle,
      isSso: this.formGroup.value.isSso
    };
    this.closeModal.emit(returnValue);
    this.analyticsService.emitEvent({
      eventType: EventType.Click,
      eventName: 'Save grant manager',
      extras: null
    });
  }

  cancel () {
    this.closeModal.emit();
  }
}