import { Component, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { SpinnerService } from '@core/services/spinner.service';
import { BudgetImport, BudgetImportModel, FundingSource } from '@core/typings/budget.typing';
import { FileService, OrganizedError, 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';
import { BudgetService } from '../budget.service';
interface BudgetImportGroup {
  fundingSources: number[];
}

@Component({
  selector: 'gc-budget-import-modal',
  templateUrl: './budget-import-modal.component.html',
  styleUrls: ['./budget-import-modal.component.scss']
})
export class BudgetImportModalComponent extends YCModalComponent<BudgetImport> implements OnInit {
  // this extends BudgetImportModel but is a dynamically generated class
  ValidationModel: any;
  fundingSourceOptions: TypeaheadSelectOption<FundingSource>[];
  budgets: BudgetImportModel[];
  errors: OrganizedError[];
  importValid: boolean;
  description = this.i18n.translate(
    'BUDGET:textStep2BudgetImportText',
    {},
    `Click the button below to select and import your completed
    allocation template. After selecting your template we will
    validate the allocations against the available funds for each
    funding source. Once all validation passes click \'Import
    allocations\'`
  );
  formGroup: TypeSafeFormGroup<BudgetImportGroup>;

  constructor (
    private fileService: FileService,
    private analyticsService: AnalyticsService,
    private budgetService: BudgetService,
    private formBuilder: TypeSafeFormBuilder,
    private i18n: I18nService,
    private spinnerService: SpinnerService
  ) {
    super();
  }

  async ngOnInit () {
    this.spinnerService.startSpinner();
    await this.setFundingSourceOptions();
    this.formGroup = this.formBuilder.group<BudgetImportGroup>({
      fundingSources: [[], Validators.required]
    });
    this.spinnerService.stopSpinner();
  }

  async setFundingSourceOptions () {
    await this.budgetService.setSourceOptions();
    this.fundingSourceOptions = this.budgetService.allSourceOptions;
  }

  setValidationModel () {
    const selectedFundingSources = this.formGroup.value.fundingSources;
    this.ValidationModel = this.budgetService.getBudgetImportModel(selectedFundingSources);
  }

  onContentsChange (budgets: BudgetImportModel[]) {
    this.budgets = budgets;
  }

  handlePrimaryClick () {
    const budgetsPayload = this.budgetService.adaptBudgetImportDataForAPI(this.budgets);
    this.closeModal.emit(budgetsPayload);
    this.analyticsService.emitEvent({
      eventName: 'Import budgets',
      eventType: EventType.Click,
      extras: null
    });
  }

  handleSecondaryClick () {
    const csv = this.fileService.convertObjectArrayToCSVString(this.errors);
    this.fileService.downloadString(csv, 'text/csv', 'BudgetImportModel_errors.csv');
    this.analyticsService.emitEvent({
      eventName: 'Download budget import errors',
      eventType: EventType.Click,
      extras: null
    });
  }

  handleGetBudgetImportTemplate () {
    const selectedFundingSources = this.formGroup.value.fundingSources;
    this.budgetService.getBudgetImportTemplate(selectedFundingSources);
  }

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