import { AppearanceType } from '@allianz/ng-aquila/formfield';
import {
  DfBaseComponent,
  DfOptions,
  DfOptionsProviderService
} from '@allianz/taly-core/dynamic-form';
import { Component, inject, input, OnInit } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
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 {
  private optionsProviderService = inject(DfOptionsProviderService, { optional: true });

  public appearanceType: AppearanceType = 'auto';

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

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

  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('');
          }
        }
      })
    );

    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)) {
      this.validateNoDuplicateValues(configValue.options);
      return of(configValue.options);
    }

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

    return of([]);
  }

  private validateNoDuplicateValues(options: DfOptions[] | null): void {
    if (!options?.length) {
      return;
    }

    const values = options.map((opt) => opt.value);
    const uniqueValues = new Set(values);
    if (values.length !== uniqueValues.size) {
      throw new Error(
        `Dropdown "${
          this.config().id
        }" contains duplicate option values. Please check your options configuration.`
      );
    }
  }

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

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