import { Component, Input, OnInit } from '@angular/core';
import { DebounceFactory, PaginationOptions, TableDataFactory } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import moment from 'moment';
import { InvitationService } from '../invitation.service';
import { ScheduleInvitee, ScheduleRecord } from '../invitation.typing';

@Component({
  selector: 'gc-invitees-modal',
  templateUrl: './invitees-modal.component.html',
  styleUrls: ['./invitees-modal.component.scss']
})
export class InviteesModalComponent extends YCModalComponent<void> implements OnInit {
  @Input() schedule: ScheduleRecord;

  modalHeader = this.i18n.translate(
    'GLOBAL:textInvitees',
    {},
    'Invitees'
  );
  modalSubHeader = '';
  tableDataFactory: TableDataFactory<ScheduleInvitee>;

  constructor (
    private invitationService: InvitationService,
    private i18n: I18nService
  ) {
    super();
  }

  async ngOnInit () {
    this.modalSubHeader = this.i18n.translate(
      'PROGRAM:textInviteesModalSubHeader',
      {
        name: this.schedule.distributionListName,
        date: moment(this.schedule.scheduledDate).format('ll')
      },
      'Invitees for __name__ scheduled for __date__'
    );
    this.tableDataFactory = DebounceFactory.createSimple(
      async (options: PaginationOptions<ScheduleInvitee>) => {
        const data = await this.invitationService.getScheduleInvitees(
          options,
          this.schedule.distributionListScheduleId,
          this.schedule.distributionListId
        );

        return {
          success: true,
          data
        };
      }
    );
  }
}