import {
  DfBaseComponent,
  DfOptions,
  DfOptionsProviderService
} from '@allianz/taly-core/dynamic-form';
import { ChangeDetectionStrategy, Component, inject, input, OnInit } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { UntypedFormControl } from '@angular/forms';
import { combineLatest, Observable, of } from 'rxjs';
import { delay, map, shareReplay, switchMap, tap } from 'rxjs/operators';
import { DfDropdownConfig } from './dropdown.model';
import { TalyStateService } from '@allianz/taly-core';

@Component({
  selector: 'df-dropdown',
  styleUrls: ['./dropdown.component.scss'],
  templateUrl: './dropdown.component.html',
  standalone: false,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfDropdownComponent extends DfBaseComponent<DfDropdownConfig> implements OnInit {
  private optionsProviderService = inject(DfOptionsProviderService, { optional: true });
  private talyStateService = inject(TalyStateService, { optional: true });

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

  readonly dropDownOptions$: Observable<DfOptions[]> = toObservable(this.config).pipe(
    switchMap((configValue) => this.getDropDownOptions(configValue)),
    delay(0), //fix expression changed after checked
    tap((values) => this.syncControlWithOptions(values)),
    shareReplay(1)
  );

  readonly interpolatedDropDownOptions$: Observable<DfOptions[]> = this.dropDownOptions$.pipe(
    switchMap((options) => this.interpolateOptions(options))
  );

  override ngOnInit() {
    super.ngOnInit();
    // Validate initial options synchronously to preserve original fail-fast behavior.
    const initialOptions = this.config().options;
    if (Array.isArray(initialOptions)) {
      this.validateNoDuplicateValues(initialOptions);
    }
    this.emitFormControlEventOnValueChanges();
  }

  // TODO: Change this to be an impure pipe (There is already a ticket for that):
  getDropDownOptions(configValue = this.config()): Observable<DfOptions[]> {
    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 syncControlWithOptions(values: DfOptions[]): void {
    const optionValues = values.map((option) => option.value);
    const currentValue = this.control().value;
    const configValue = this.config();

    if (configValue.autoPrefill && values.length === 1) {
      const singleValue = values[0].value;
      this.control().setValue(configValue.multiSelect ? [singleValue] : singleValue);
      return;
    }

    if (currentValue != null) {
      // To prevent invalid values in state
      if (configValue.multiSelect) {
        const isValid =
          Array.isArray(currentValue) &&
          currentValue.length > 0 &&
          currentValue.every((val) => optionValues.includes(val));
        if (!isValid) {
          this.control().setValue([]);
        }
      } else {
        if (!optionValues.includes(currentValue)) {
          this.control().setValue('');
        }
      }
    }
  }

  private interpolateOptions(options: DfOptions[]): Observable<DfOptions[]> {
    if (!options.length) return of([]);
    const talyStateService = this.talyStateService;
    if (!talyStateService) return of(options);

    return combineLatest(
      options.map((option) =>
        talyStateService
          .interpolateFromStore$(option.label)
          .pipe(map((interpolatedLabel) => ({ ...option, label: interpolatedLabel })))
      )
    );
  }

  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.`
      );
    }
  }

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