import { Component, Input, OnInit } from '@angular/core';
import { CurrencyService } from '@core/services/currency.service';
import { SpinnerService } from '@core/services/spinner.service';
import { RecommendedFundingInfoForUI } from '@core/typings/application.typing';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { FormDecisionTypes } from '@features/configure-forms/form.typing';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { MaskingService } from '@yourcause/common/masking';
import { YCModalComponent } from '@yourcause/common/modals';
import { isUndefined } from 'lodash';
import { ApplicationViewService } from '../application-view.service';

export interface RecommendedFundingAmountModalResponse {
  recommendedFundingAmount: number;
}

@Component({
  selector: 'gc-recommend-funding-modal',
  templateUrl: './recommend-funding-modal.component.html',
  styleUrls: ['./recommend-funding-modal.component.scss']
})
export class RecommendFundingModalComponent extends YCModalComponent<
  RecommendedFundingAmountModalResponse
> implements OnInit {
  @Input() applicationId: number;
  @Input() amountRequested: number;
  @Input() currencyRequested: string;
  @Input() currencyRequestedAmountEquivalent: number;
  @Input() recommendedFundingAmount: number;

  recommendedFundingInfo: RecommendedFundingInfoForUI[];
  formGroup: TypeSafeFormGroup<{
    recommendedFundingAmount: string;
  }>;
  formattingData = this.currencyService.formattingData;
  defaultCurrency = this.clientSettingsService.defaultCurrency;
  defaultCurrencySymbol: string;
  amountRequestedString: string;
  amountRequestedConversionString: string;
  DecisionTypes = FormDecisionTypes;
  showDecisionColumn: boolean;
  showRecommendedColumn: boolean;

  constructor (
    private spinnerService: SpinnerService,
    private applicationViewService: ApplicationViewService,
    private formBuilder: TypeSafeFormBuilder,
    private clientSettingsService: ClientSettingsService,
    private currencyService: CurrencyService,
    private maskingService: MaskingService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  async ngOnInit () {
    this.setAmountRequestedInfo();
    this.spinnerService.startSpinner();
    this.recommendedFundingInfo = await this.applicationViewService.getReviewerRecommendedFundingInfo(
      this.applicationId
    );
    this.setColumnVisibility();
    this.setFormGroup();
    this.spinnerService.stopSpinner();
  }

  setColumnVisibility () {
    this.showDecisionColumn = this.recommendedFundingInfo.some((row) => {
      return !!row.decision;
    });
    this.showRecommendedColumn = this.recommendedFundingInfo.some((row) => {
      return row.recommendedFundingAmount !== null &&
         !isUndefined(row.recommendedFundingAmount);
    });
  }

  setFormGroup () {
    const formattingDetail = this.formattingData[this.defaultCurrency];
    const defaultAmount = this.recommendedFundingAmount ||
      this.amountRequested ||
      0;
    let formValue = defaultAmount.toFixed(formattingDetail.precision);
    formValue = this.maskingService.maskNumberDecimal(
      formValue,
      this.formattingData[this.defaultCurrency]
    );
    this.formGroup = this.formBuilder.group({
      recommendedFundingAmount: formValue
    });
  }

  setAmountRequestedInfo () {
    const formattingDetail = this.formattingData[this.defaultCurrency];
    this.defaultCurrencySymbol = formattingDetail.symbol;
    if (!this.currencyRequested) {
      this.currencyRequested = this.defaultCurrency;
    }
    if (this.amountRequested) {
      this.amountRequestedString = this.currencyService.formatMoney(
        this.currencyRequestedAmountEquivalent || this.amountRequested,
        this.currencyRequested,
        true
      );
      if (this.currencyRequested !== this.defaultCurrency) {
        this.amountRequestedConversionString = this.currencyService.formatMoney(
          this.amountRequested,
          this.defaultCurrency,
          true
        );
      }
    }
  }

  onSave () {
    const recommendedFundingAmount =  this.maskingService.unmaskNumber(
      this.formattingData[this.defaultCurrency],
      this.formGroup.value.recommendedFundingAmount
    );
    this.closeModal.emit({
      recommendedFundingAmount
    });
    this.analyticsService.emitEvent({
      eventName: 'Recommended funding modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }
}