import { Component, Input, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { TranslationService } from '@core/services/translation.service';
import { CyclesUI } from '@core/typings/ui/cycles.typing';
import { CyclesService } from '@features/cycles/cycles.service';
import { ProgramService } from '@features/programs/program.service';
import { TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
interface UpdateCycleGroup {
  comment: string;
  cycleID: number;
}

@Component({
  selector: 'gc-update-app-cycle-modal',
  templateUrl: './update-app-cycle-modal.component.html',
  styleUrls: ['./update-app-cycle-modal.component.scss']
})
export class UpdateAppCycleModalComponent extends YCModalComponent<boolean> implements OnInit {
  @Input() modalData: CyclesUI.UpdateAppCycleModalData;
  @Input() isNomination: boolean;

  errorMessage: string;
  formGroup: TypeSafeFormGroup<UpdateCycleGroup>;
  cycleOptions: TypeaheadSelectOption<number>[];
  cycleTranslateMap = this.translationService.viewTranslations.Grant_Program_Cycle;
  updateCycleText = this.i18n.translate(
    'common:hdrUpdateCycle',
    {},
    'Update Cycle'
  );
  primaryButtonText = this.i18n.translate(
    'common:btnSave',
    {},
    'Save'
  );
  eligibleCyclesText = this.i18n.translate(
    'MANAGE:textEligibleCyclesHelp',
    {},
    'Eligible cycles must contain matching budgets/funding sources with the budgets/funding sources used for any payments for selected applications'
  );
  noAvailableCyclesText = this.i18n.translate(
    'common:textNoAvailableCycles',
    {},
    'No available cycles'
  );
  totalApplicationsText = this.i18n.translate(
    'common:lblTotalApplications',
    {},
    'Total Applications'
  );
  totalNominationsText = this.i18n.translate(
    'common:lblTotalNominations',
    {},
    'Total Nominations'
  );
  totalApplicationsStatLabel: string;

  constructor (
    private i18n: I18nService,
    private spinnerService: SpinnerService,
    private formBuilder: TypeSafeFormBuilder,
    private programService: ProgramService,
    private cyclesService: CyclesService,
    private translationService: TranslationService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  async ngOnInit () {
    this.spinnerService.startSpinner();
    this.totalApplicationsStatLabel = this.isNomination ?
      this.totalNominationsText :
      this.totalApplicationsText;
    await this.setCycleOptions();
    this.formGroup = this.formBuilder.group<UpdateCycleGroup>({
      comment: '',
      cycleID: null
    });
    this.spinnerService.stopSpinner();
  }

  async setCycleOptions () {
    const program = await this.programService.getProgram('' + this.modalData.programId);
    this.cycleOptions = program.cycles.filter((cycle) => {
      return this.modalData.eligibleCycleIds.includes(cycle.id);
    }).map((cycle) => {
      const record = this.cycleTranslateMap[cycle.id];
      const label = record && record.Name ? record.Name : cycle.name;

      return {
        value: cycle.id,
        label
      };
    });
  }

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

  async onSubmit () {
    const payload = {
      applicationIds: this.modalData.applicationIds,
      cycleId: this.formGroup.value.cycleID,
      comment: this.formGroup.value.comment
    };
    const errorMessage = await this.cyclesService.handleBulkCycleUpdate(payload);
    if (errorMessage) {
      this.errorMessage = errorMessage;
    } else {
      this.closeModal.emit(true);
    }
    this.analyticsService.emitEvent({
      eventName: 'Update app cycle modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }
}