import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { PaymentDesignation } from '@core/typings/payment.typing';
import { TextFriendlySpecialCharCleaner, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
interface DesignationFormGroup {
  paymentDesignation: string;
}

@Component({
  selector: 'gc-designation-modal',
  templateUrl: './designation-modal.component.html',
  styleUrls: ['./designation-modal.component.scss']
})
export class DesignationModalComponent extends YCModalComponent<DesignationFormGroup> implements OnInit {
  @Input() paymentId: number;
  @Input() paymentDesignation: string;
  @Input() applicationId: number;

  formGroup: TypeSafeFormGroup<DesignationFormGroup>;

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

  ngOnInit () {
    this.formGroup = this.formBuilder.group({
      paymentDesignation: [this.paymentDesignation ?
        this.paymentDesignation : '', Validators.maxLength(300)]
    });
  }

  save () {
    const designation = this.formGroup.value.paymentDesignation;

    const data: PaymentDesignation = {
      paymentDesignation: TextFriendlySpecialCharCleaner(designation)
    };

    this.closeModal.emit(data);
    this.analyticsService.emitEvent({
      eventName: 'Designation modal save',
      eventType: EventType.Click,
      extras: null
    });
  }

}