import {
  DfBaseComponent,
  DfOptions,
  DfOptionsProviderService
} from '@allianz/taly-core/dynamic-form';
import { Component, inject, input, OnInit } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { combineLatest, Observable, of } from 'rxjs';
import { delay, map, 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
})
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());

  dropDownOptions$: Observable<DfOptions[]> | undefined;
  interpolatedDropDownOptions$: Observable<DfOptions[]> | undefined;

  override ngOnInit() {
    super.ngOnInit();
    this.dropDownOptions$ = this.getDropDownOptions().pipe(
      delay(0), //fix expression changed after checked
      tap((values) => {
        const optionValues = values.map((option) => option.value);
        const currentValue = this.control().value;

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

        if (currentValue != null) {
          // To prevent invalid values in state
          if (this.config().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('');
            }
          }
        }
      })
    );

    this.interpolatedDropDownOptions$ = this.createInterpolatedOptions();

    this.emitFormControlEventOnValueChanges();
  }

  private createInterpolatedOptions(): Observable<DfOptions[]> {
    if (!this.dropDownOptions$) {
      return of([]);
    }

    return this.dropDownOptions$.pipe(
      switchMap((options) => {
        if (!options || options.length === 0) {
          return of([]);
        }
        const talyStateService = this.talyStateService;
        if (!talyStateService) {
          return of(options);
        }

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

        return combineLatest(interpolatedOptions$);
      })
    );
  }

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

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