import { DfBaseComponent, DfInfoIconComponent } from '@allianz/taly-core/dynamic-form';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  ElementRef,
  inject,
  input,
  OnInit
} from '@angular/core';
import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import { DfNumberStepperConfig } from './number-stepper.model';
import {
  NxNumberStepperComponent,
  NxNumberStepperPrefixDirective,
  NxNumberStepperSuffixDirective
} from '@allianz/ng-aquila/number-stepper';
import { AsyncPipe, NgClass } from '@angular/common';
import { InterpolateFromStorePipe, ValidationConfig } from '@allianz/taly-core';
import { NxFormfieldAppendixDirective } from '@allianz/ng-aquila/formfield';
import { NxMessageComponent } from '@allianz/ng-aquila/message';
import { NxErrorComponent, NxLabelComponent } from '@allianz/ng-aquila/base';
import { LocalizeFn } from '@angular/localize/init';
import { InputElementInjectorModule } from '@allianz/taly-acl/input-element-injector-directive';

declare let $localize: LocalizeFn;

@Component({
  selector: 'df-number-stepper',
  styleUrls: ['./number-stepper.component.scss'],
  templateUrl: './number-stepper.component.html',
  imports: [
    NxNumberStepperComponent,
    AsyncPipe,
    DfInfoIconComponent,
    InterpolateFromStorePipe,
    NxFormfieldAppendixDirective,
    NxLabelComponent,
    NgClass,
    NxMessageComponent,
    ReactiveFormsModule,
    NxNumberStepperSuffixDirective,
    NxNumberStepperPrefixDirective,
    InputElementInjectorModule,
    NxErrorComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfNumberStepperComponent
  extends DfBaseComponent<DfNumberStepperConfig>
  implements OnInit
{
  override control = input<UntypedFormControl>(new UntypedFormControl());

  private el = inject(ElementRef);

  constructor() {
    super();

    this.enrichedValidationConfigs = computed(() => {
      const baseValidations = this.validationConfigs() || [];

      return [
        ...baseValidations,
        {
          validatorName: 'nxNumberStepperStepError',
          errorMessage:
            this.config().valueOutsideRangeErrorMessage ||
            $localize`:@@validation.error.number-stepper-outside-range:The value must be within the allowed range and match the step size.`
        } as ValidationConfig,
        {
          validatorName: 'nxNumberStepperFormatError',
          errorMessage:
            this.config().invalidFormatErrorMessage ||
            $localize`:@@validation.error.number-stepper-format-error:The value must be a number.`
        } as ValidationConfig
      ];
    });
  }

  override ngOnInit() {
    super.ngOnInit();
    this.emitFormControlEventOnValueChangesWithDebounce();
  }

  onBlur(event: FocusEvent) {
    const toggleButtonHasFocus = this.el.nativeElement.contains(event.relatedTarget);
    if (toggleButtonHasFocus) {
      return;
    }
    this.emitFormEvent('onBlurEvent', this.control().value);
  }
}