import { Component, Input, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { PaymentForProcess } from '@core/typings/payment.typing';
import { EmailService } from '@features/system-emails/email.service';
import { EmailNotificationType, EmailOptionsModelForSave } from '@features/system-emails/email.typing';
import { DuplicateCheckValidator, EmailValidator, GenericFile, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';

export interface NotifyPayeesModalResponse {
  customMessage: string;
  clientEmailTemplateId: number;
  emailOptions: EmailOptionsModelForSave;
}
interface NotifyPayeesFormGroup {
  customMessage: string;
  clientEmailTemplateId: number;
  attachments: GenericFile[];
  cc: string[];
  bcc: string[];
}

@Component({
  selector: 'gc-notify-payees-modal',
  templateUrl: './notify-payees-modal.component.html',
  styleUrls: ['./notify-payees-modal.component.scss']
})
export class NotifyPayeesModalComponent extends YCModalComponent<
  NotifyPayeesModalResponse
> implements OnInit {
  @Input() payments: PaymentForProcess[] = [];

  previewOpen = false;
  formGroup: TypeSafeFormGroup<NotifyPayeesFormGroup>;
  emailType = EmailNotificationType.SendPaymentInfoFromBatch;
  saving = false;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private spinnerService: SpinnerService,
    private emailService: EmailService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.formGroup = this.formBuilder.group<NotifyPayeesFormGroup>({
      customMessage: '',
      attachments: [],
      cc: [[], EmailValidator()],
      bcc: [[], EmailValidator()],
      clientEmailTemplateId: 0
    }, {
      validator: [
        DuplicateCheckValidator(
          'cc',
          'bcc'
        )
      ]
    });
  }

  async save () {
    this.spinnerService.startSpinner();
    this.saving = true;
    const formValue = this.formGroup.value;
    const attachments = await this.emailService.returnIdsFromMixedAttachments(
      formValue.attachments
    );
    this.saving = false;
    this.spinnerService.stopSpinner();
    this.closeModal.emit({
      clientEmailTemplateId: formValue.clientEmailTemplateId,
      customMessage: formValue.customMessage,
      emailOptions: {
        ccEmails: formValue.cc,
        bccEmails: formValue.bcc,
        attachments
      }
    });
    this.analyticsService.emitEvent({
      eventName: 'Notify payees modal save',
      eventType: EventType.Click,
      extras: null
    });
  }
}