import { Component, Input, OnInit, Optional } from '@angular/core';
import { FormGroupDirective, ValidatorFn } from '@angular/forms';
import { CurrencyService } from '@core/services/currency.service';
import { ValidatorsService } from '@core/services/validators.service';
import { BaseApplication } from '@core/typings/application.typing';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { FormBuilderService } from '@features/formio/form-builder/services/form-builder/form-builder.service';
import { GcFormRendererComponent } from '@features/formio/form-renderer/gc-form-renderer/gc-form-renderer.component';
import { ComponentHelperService } from '@features/formio/services/component-helper/component-helper.service';
import { TypeaheadSelectOption, TypeSafeFormBuilder } from '@yourcause/common';
import { CurrencyRadioOptions, CurrencyValue } from '@yourcause/common/masking';
import { isEqual } from 'lodash';
import { BaseFormioComponent } from '../../base/base.component';

@Component({
  selector: 'gc-amount-requested',
  templateUrl: './gc-amount-requested.component.html',
  styleUrls: ['./gc-amount-requested.component.scss']
})
export class GcAmountRequestedComponent extends BaseFormioComponent<CurrencyValue> implements OnInit {
  @Input() useCustomCurrency: CurrencyRadioOptions;
  @Input() forceDefaultCurrency: boolean;
  @Input() currencyOptions: TypeaheadSelectOption[] = [];
  @Input() canToggleCurrency = false;

  formattingData = this.currencyService.formattingData;
  CurrencyRadioOptions = CurrencyRadioOptions;

  constructor (
    private clientSettingsService: ClientSettingsService,
    private currencyService: CurrencyService,
    public formBuilder: TypeSafeFormBuilder,
    private validatorService: ValidatorsService,
    public formBuilderService: FormBuilderService,
    public componentHelper: ComponentHelperService,
    @Optional() formGroupDir: FormGroupDirective,
    @Optional() renderer: GcFormRendererComponent<BaseApplication>
  ) {
    super(renderer, formGroupDir, formBuilder, formBuilderService, componentHelper);
  }

  get currency () {
    if (this.forceDefaultCurrency) {
      return this.defaultCurrency;
    }

    return this.data?.currency;
  }

  get equivalentCurrency () {
    if (this.forceDefaultCurrency) {
      return this.data?.currency;
    }

    return this.defaultCurrency;
  }

  get equivalentAmount () {
    if (this.forceDefaultCurrency) {
      return this.data?.amountEquivalent;
    }

    return this.data.amountInDefaultCurrency;
  }

  get defaultCurrency () {
    return this.clientSettingsService.defaultCurrency;
  }

  ngOnInit () {
    super.ngOnInit();
    let validators: ValidatorFn[] = [];
    if (!this.inFormBuilder) {
      validators = this.validatorService.getValidatorsForSimpleComponent(
        this.comp,
        true,
        false,
        false,
        this.translations
      );
    }
    this.setFormGroup(this.data, validators);
    if (this.comp.appliedDefaultVal) {
      setTimeout(() => {
        this.amountChanged();
      });
    }
  }

  patchValue () {
    if (
      this.afterInit &&
      !isEqual(this.data, this.control.value)
    ) {
      this.amountChanged();
    }
  }

  onAmountChange (amount = this.data.amountForControl) {
    this.control.markAsDirty();
    this.amountChanged(amount);
  }

  amountChanged (amount = this.data.amountForControl) {
    this.onValueChange.emit({
      value: {
        ...this.data,
        amountForControl: amount
      },
      updateFormGroup: true
    });
  }

  onCurrencyChange (currency: string) {
    if (!this.forceDefaultCurrency) {
      // The data setter will fire patch value, which will trigger onValueChange
      this.data = {
        ...this.data,
        currency
      };
    }
  }
}