import { Component, Input, OnInit } from '@angular/core';
import { PaymentForProcess, UpdatePaymentsModalResponse } from '@core/typings/payment.typing';
import { PaymentStatus } from '@core/typings/status.typing';
import { AwardService } from '@features/awards/award.service';
import { TypeaheadSelectOption, 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-update-payments-modal',
  templateUrl: './update-payments-modal.component.html',
  styleUrls: ['./update-payments-modal.component.scss']
})

export class UpdatePaymentsModalComponent extends YCModalComponent<
  UpdatePaymentsModalResponse
> implements OnInit {
  @Input() isInKind = false;
  @Input() payments: PaymentForProcess[];

  formGroup: TypeSafeFormGroup<UpdatePaymentsModalResponse>;
  cashStatusOptions: TypeaheadSelectOption[] = [ {
    label: this.i18n.translate('GLOBAL:textScheduled'),
    value: PaymentStatus.Scheduled
  }, {
    label: this.i18n.translate('GLOBAL:textOutstanding'),
    value: PaymentStatus.Outstanding
  }, {
    label: this.i18n.translate('GLOBAL:lblCleared'),
    value: PaymentStatus.Cleared
  }, {
    label: this.i18n.translate('GLOBAL:textVoided'),
    value: PaymentStatus.Voided
  }];
  inKindStatusOptions: TypeaheadSelectOption[] = [ {
    label: this.i18n.translate('common:lblPending'),
    value: PaymentStatus.Pending
  }, {
    label: this.i18n.translate('GLOBAL:textFulfilled'),
    value: PaymentStatus.Fulfilled
  }];
  paymentTypeOptions = this.awardService.getPaymentTypeOptions();

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private i18n: I18nService,
    private awardService: AwardService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  get single () {
    return this.payments ?
      this.payments.length === 1 :
      true;
  }

  ngOnInit () {
    const payment = this.single ?
      this.payments[0] :
      {} as PaymentForProcess;
    this.formGroup = this.formBuilder.group<UpdatePaymentsModalResponse>({
      checkNumber: payment.paymentNumber ?? '',
      status: payment.statusId ?? null,
      notes: payment.notes ?? '',
      issuedDate: payment.issuedDate ?? null,
      clearedDate: payment.clearedDate ?? null,
      accountNumber: payment.accountNumber ?? '',
      paymentType: payment.paymentType ?? null,
      statusDate: payment.statusDate ?? null
    });
  }

  onSave () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: 'Update payments modal save',
      eventType: EventType.Click,
      extras: null
    });
  }

}