import { CHANNEL, CHANNEL_TOKEN, ValidationConfig } from '@allianz/taly-core';
import { Component, Inject, Input } from '@angular/core';
import { ValidationErrors } from '@angular/forms';
import { ErrorStyleType } from '@aposin/ng-aquila/base';
import { Observable, isObservable, of } from 'rxjs';
import {
  INTERNAL_VALIDATOR_MESSAGES,
  InternalValidatorMessage,
  ValidatorId
} from './internal-validator-messages';

@Component({
  // eslint-disable-next-line
  selector: 'taly-validation-errors',
  templateUrl: 'validation-errors.component.html'
})
export class ValidationErrorsComponent {
  @Input() isInputDateYear = false;

  private _controlErrors: ValidationErrors = {};
  private _validationConfigs: ValidationConfig[] = [];

  errorMessages$: Observable<string>[] = [];

  @Input()
  set controlErrors(value: ValidationErrors | null | undefined) {
    this._controlErrors = value || {};
    this.errorMessages$ = this.getErrorMessageStreams();
  }

  @Input()
  set errorMessages(value: ValidationConfig[] | undefined) {
    this._validationConfigs = value?.filter((config) => config.validatorName) ?? [];
    this.errorMessages$ = this.getErrorMessageStreams();
  }
  get errorMessages(): ValidationConfig[] {
    return this._validationConfigs;
  }

  /** `nx-error` appearance. Only use this to override default behavior: `text` for Expert and
   *  `message` for Retail. */
  @Input() appearance: ErrorStyleType;

  constructor(@Inject(CHANNEL_TOKEN) channel: CHANNEL) {
    this.appearance = channel === CHANNEL.EXPERT ? 'text' : 'message';
  }

  getErrorMessageStreams() {
    const displayErrorKeys = this.getDisplayedErrors();
    const internalValidatorMessage = INTERNAL_VALIDATOR_MESSAGES.filter((item) => {
      if (item.validatorName === 'nxDatefieldParse') {
        return this.isInputDateYear
          ? item.validatorId === ValidatorId.nxDatefieldParseYears
          : item.validatorId === ValidatorId.nxDatefieldParse;
      }
      return true;
    });

    const availableValidatorConfigs = [...this._validationConfigs, ...internalValidatorMessage];

    return displayErrorKeys.reduce((errorMessages$: Observable<string>[], key: string) => {
      const message =
        availableValidatorConfigs.find((config) => config.validatorName === key)?.errorMessage ??
        '';
      const message$ = isObservable(message) ? message : of(message);
      return [...errorMessages$, message$];
    }, []);
  }

  getDisplayedErrors() {
    const allControlErrorKeys = Object.keys(this._controlErrors);
    const externalValidatorKeys = this.errorMessages.map((item) => item.validatorName);
    const internalValidatorKeys = INTERNAL_VALIDATOR_MESSAGES.map(
      (item: InternalValidatorMessage) => item.validatorName
    );

    // Only errors those are configured externally or internally and present in `form-control` error list are allowed to be shown
    const allowedKeys = allControlErrorKeys.filter(
      (errorKey) =>
        externalValidatorKeys.includes(errorKey) || internalValidatorKeys.includes(errorKey)
    );

    // If an internal error is present in the allowedKeys, then ignore the relevant external errors based on `ignoreValidators` attribute
    const keysToIgnore = INTERNAL_VALIDATOR_MESSAGES.reduce(
      (acc: string[], curr: InternalValidatorMessage) => {
        if (allowedKeys.includes(curr.validatorName) && curr.ignoreValidators !== undefined) {
          acc = acc.concat(curr.ignoreValidators);
        }
        return acc;
      },
      new Array<string>()
    );

    return allowedKeys.filter((item) => !keysToIgnore.includes(item));
  }
}