import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { SpinnerService } from '@core/services/spinner.service';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
import { AudienceService } from '../audience.service';
import { Audience, AudienceDetail, AudienceMember, AudienceModalResponse } from '../audience.typing';

interface AudienceModalFormGroup {
  audienceName: string;
  description: string;
}

@Component({
  selector: 'gc-audience-modal',
  templateUrl: './audience-modal.component.html',
  styleUrls: ['./audience-modal.component.scss']
})
export class AudienceModalComponent extends YCModalComponent<
  AudienceModalResponse
> implements OnInit {
  @Input() audience: Audience;
  tableKey: string;
  audienceDetail: AudienceDetail;
  formGroup: TypeSafeFormGroup<AudienceModalFormGroup>;
  selectedUsers: AudienceMember[] = [];
  addingExternalUser = false;
  topLevelFilters = this.audienceService.getTopLevelFiltersForUserAudienceTable();

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private audienceService: AudienceService,
    private spinnerService: SpinnerService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  async ngOnInit () {
    this.spinnerService.startSpinner();
    this.tableKey = 'AUDIENCE_MEMBERS_' +
      (this.audience ? this.audience.id : 0);
    if (this.audience) {
      await this.audienceService.setAudienceDetail(this.audience);
      this.audienceDetail = this.audienceService.audienceDetailMap[
        this.audience.id
      ];
      this.selectedUsers = this.audienceDetail.members;
    } else {
      this.selectedUsers = [];
    }
    const detail = this.audienceDetail || {} as AudienceDetail;
    this.formGroup = this.formBuilder.group({
      audienceName: [detail.name || '', Validators.required],
      description: detail.description || ''
    });
    this.spinnerService.stopSpinner();
  }

  onSubmit () {
    const formValue = this.formGroup.value;
    this.closeModal.emit({
      id: this.audience ? this.audience.id : null,
      name: formValue.audienceName,
      description: formValue.description,
      members: this.selectedUsers
    });
    this.analyticsService.emitEvent({
      eventName: 'Audience modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }

  onCancel () {
    this.closeModal.emit();
  }

}