import {
  DfBaseComponent,
  DfBaseModule,
  DfInfoIconComponent,
  DfOptionsProviderService
} from '@allianz/taly-core/dynamic-form';
import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  inject,
  input,
  OnInit
} from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import { DfToggleButtonConfig, DfToggleButtonSize } from './toggle-button.model';
import { NxLabelModule } from '@allianz/ng-aquila/base';
import { NxRadioToggleModule } from '@allianz/ng-aquila/radio-toggle';
import { NxIconModule } from '@allianz/ng-aquila/icon';
import { NxMessageModule } from '@allianz/ng-aquila/message';
import { NxFormfieldModule } from '@allianz/ng-aquila/formfield';
import { of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'df-toggle-button',
  styleUrls: ['./toggle-button.component.scss'],
  templateUrl: './toggle-button.component.html',
  imports: [
    ReactiveFormsModule,
    NxLabelModule,
    NxRadioToggleModule,
    NxIconModule,
    NxMessageModule,
    DfBaseModule,
    DfInfoIconComponent,
    NxFormfieldModule
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfToggleButtonComponent
  extends DfBaseComponent<DfToggleButtonConfig>
  implements OnInit
{
  override control = input<UntypedFormControl>(new UntypedFormControl());
  DfToggleButtonSize = DfToggleButtonSize;
  toggleButtonOptions$ = toObservable(this.config).pipe(
    switchMap((config) => {
      if (Array.isArray(config.options)) {
        return of(config.options);
      }

      if (this.optionsProviderService) {
        return this.optionsProviderService.getDfOptions(config.options);
      }

      return of([]);
    })
  );

  private optionsProviderService = inject(DfOptionsProviderService, { optional: true });
  private el = inject(ElementRef);

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

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