import { Component, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { ContactSupport } from '@core/typings/ui/support.typing';
import { EmailExtensionValidator, PanelTypes, TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';

@Component({
  selector: 'gc-contact-support-modal',
  templateUrl: './contact-support-modal.component.html',
  styleUrls: ['./contact-support-modal.component.scss']
})
export class ContactSupportModalComponent extends YCModalComponent<ContactSupport.ContactSupportModalReturn> implements OnInit {
  prepopData: ContactSupport.ContactSupportModalReturn;
  formGroup: TypeSafeFormGroup<ContactSupport.ContactSupportModalReturn>;
  PanelTypes = PanelTypes;
  contactReasonPostAuthOptions: TypeaheadSelectOption<ContactSupport.ContactReasonFullList>[];

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

  async ngOnInit () {
    this.formGroup = this.formBuilder.group<ContactSupport.ContactSupportModalReturn>({
      contactReason: [this.prepopData.contactReason, Validators.required],
      firstName: [this.prepopData.firstName, Validators.required],
      lastName: [this.prepopData.lastName, Validators.required],
      phoneNumber: [this.prepopData.phoneNumber, Validators.required],
      clientName: [this.prepopData.clientName, Validators.required],
      applicationId: this.prepopData.applicationId,
      programName: this.prepopData.programName,
      organizationName: this.prepopData.organizationName,
      taxId: this.prepopData.taxId,
      description: [this.prepopData.description, Validators.required],
      email: [this.prepopData.email, [
        Validators.required,
        EmailExtensionValidator
      ]]
    });
  }

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

  onSubmit () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: 'Submit support ticket',
      eventType: EventType.Click,
      extras: null
    });
  }
}