import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
import { InvitationService } from '../invitation.service';
import { DistributionListRecord } from '../invitation.typing';
interface DistGroup {
  name: string;
  description: string;
}

@Component({
  selector: 'gc-distributuion-list-modal',
  templateUrl: './distribution-list-modal.component.html',
  styleUrls: ['./distribution-list-modal.component.scss']
})
export class DistributionListModalComponent extends YCModalComponent<{
  name: string;
  description: string;
}> implements OnInit {
  @Input() distributionListId: number;

  formGroup: TypeSafeFormGroup<DistGroup>;

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

  ngOnInit () {
    let distributionList: DistributionListRecord;
    if (this.distributionListId) {
      distributionList = this.invitationService.distributionLists.find((list) => {
        return list.id === this.distributionListId;
      });
    }
    this.formGroup = this.formBuilder.group({
      name: [
        distributionList ? distributionList.name : '',
        [Validators.required, Validators.maxLength(50)]
      ],
      description: [
        distributionList ? distributionList.description : ''
      ]
    });
  }

  onSubmit () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: 'Distribution list modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }
}