import { Component } from '@angular/core';
import { APIAdminClient } from '@core/typings/api/admin-client.typing';
import { APIDataImport } from '@core/typings/api/data-import.typing';
import { AdminClientService } from '@features/platform-admin/clients/admin-client.service';
import { TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
import { map, Observable } from 'rxjs';
interface CreateBatchGroup {
  name: string;
  client: APIAdminClient.Client;
}

@Component({
  selector: 'gc-create-batch-modal',
  styleUrls: ['./create-batch-modal.component.scss'],
  templateUrl: './create-batch-modal.component.html'
})
export class CreateBatchModalComponent extends YCModalComponent<APIDataImport.CreateImportBatch> {
  formGroup: TypeSafeFormGroup<CreateBatchGroup> = this.formBuilder.group({
    name: [''],
    client: [this.adminClientService.activeClient || null]
  });

  clientOptions$: Observable<TypeaheadSelectOption<APIAdminClient.Client>[]> = this.adminClientService.changesTo$('clients').pipe(
    map(clients => clients.map(client => ({
      value: client,
      label: client.name
    }))));

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

  submit () {
    const value = this.formGroup.value;
    this.closeModal.emit({
      name: value.name,
      clientId: value.client.clientId
    });
    this.analyticsService.emitEvent({
      eventName: 'Create batch modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }
}