import {
  DfBaseComponent,
  DfOptions,
  DfOptionsProviderService
} from '@allianz/taly-core/dynamic-form';
import { Component, Inject, input, OnInit, Optional } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import {
  AppearanceType,
  FloatLabelType,
  FORMFIELD_DEFAULT_OPTIONS,
  FormfieldDefaultOptions
} from '@aposin/ng-aquila/formfield';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { delay, tap } from 'rxjs/operators';
import { DfDropdownConfig } from './dropdown.model';

@Component({
  selector: 'df-dropdown',
  styleUrls: ['./dropdown.component.scss'],
  templateUrl: './dropdown.component.html',
  standalone: false
})
export class DfDropdownComponent extends DfBaseComponent<DfDropdownConfig> implements OnInit {
  public appearanceType: AppearanceType = 'auto';
  public floatLabelType: FloatLabelType = 'auto';

  override control = input<UntypedFormControl>(new UntypedFormControl());

  dropDownOptions$: Observable<DfOptions[]> | undefined;
  preselect$ = new BehaviorSubject<string>('');
  labelAlwaysFloating?: boolean;

  constructor(
    @Optional() private optionsProviderService: DfOptionsProviderService,
    @Optional()
    @Inject(FORMFIELD_DEFAULT_OPTIONS)
    private formfieldDefaultOptions: FormfieldDefaultOptions
  ) {
    super();
    // Don't overwrite the value from the InjectionToken, if provided.
    // Be aware that the `expert` style always needs the float label.
    this.floatLabelType = formfieldDefaultOptions?.nxFloatLabel || 'auto';
  }

  override ngOnInit() {
    super.ngOnInit();
    this.setUpExpertMode();
    this.dropDownOptions$ = this.getDropDownOptions().pipe(
      delay(0), //fix expression changed after checked
      tap((values) => {
        if (this.config().autoPrefill) {
          if (values) {
            if (values.length === 1) {
              this.preselect$.next(values[0].value);
            } else {
              if (
                this.preselect$.value &&
                !values.map((option) => option.value).includes(this.preselect$.value)
              ) {
                this.preselect$.next('');
              }
            }
          } else {
            this.preselect$.next('');
          }
        }
      })
    );
    /* If label is not floating, then we pass the label to the nx-formfield.
     ** TODO: exchange this logic when NDBX support that with this config is supported multiple lines
     */
    this.labelAlwaysFloating = this.formfieldDefaultOptions?.nxFloatLabel === 'always';

    this.emitFormControlEventOnValueChanges();
  }

  // TODO: Change this to be an impure pipe (There is already a ticket for that):
  getDropDownOptions(): Observable<DfOptions[]> {
    const configValue = this.config();
    if (Array.isArray(configValue.options)) {
      return of(configValue.options);
    }

    if (typeof configValue.options === 'string' && this.optionsProviderService) {
      return this.optionsProviderService.getDfOptions(configValue.options);
    }

    return of([]);
  }

  private setUpExpertMode() {
    if (!this.isRetailChannel()) {
      this.appearanceType = 'outline';
      this.floatLabelType = 'always';
    }
  }

  protected onBlur() {
    this.emitFormEvent('onBlurEvent', this.control().value);
  }
}