import { RowJustification } from '@allianz/ng-aquila/grid';
import { IS_A1 } from '@allianz/taly-core';
import {
  CONTAINER_BREAKPOINT_M,
  DfBaseComponent,
  DfOptions,
  DfOptionsProviderService,
  FORM_CONTAINER_WIDTH,
  VerticalLayout
} from '@allianz/taly-core/dynamic-form';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  ElementRef,
  inject,
  input,
  OnInit,
  Signal
} from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { UntypedFormControl } from '@angular/forms';
import { of, switchMap } from 'rxjs';
import { DfRadioConfig } from './radio.model';

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

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

  protected isA1 = inject(IS_A1);
  protected isRetailNonA1 = computed(() => this.isRetailChannel() && !this.isA1);
  private formContainerWidth = inject(FORM_CONTAINER_WIDTH, { optional: true });
  readonly radioOptions: Signal<DfOptions[]> = toSignal(
    toObservable(this.config).pipe(
      switchMap((configValue) => {
        if (Array.isArray(configValue.options)) return of(configValue.options);
        if (typeof configValue.options === 'string' && this.optionsProviderService) {
          return this.optionsProviderService.getDfOptions(configValue.options);
        }
        return of([]);
      })
    ),
    { initialValue: [] }
  );
  readonly horizontalOptionsAlignment = computed(() => this.computeHorizontalOptionsAlignment());
  private isGroupLabelLeftAligned = computed(
    () =>
      this.isRetailChannel() &&
      !!(this.config().layout as VerticalLayout)?.groupLabelLeftAlignInRetail
  );
  readonly groupLabelCol = computed(() => this.computeGroupLabelCol());
  readonly optionsColumn = computed(() => {
    const span = this.config().layout?.optionsColumnSpan || 4;
    const containerWidth = this.formContainerWidth?.() ?? Infinity;
    return containerWidth <= CONTAINER_BREAKPOINT_M ? '12' : `${span}`;
  });
  readonly labelCenter = computed(() => this.isRetailNonA1() && !this.isGroupLabelLeftAligned());

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

  getRadioOptions(): Signal<DfOptions[]> {
    return this.radioOptions;
  }

  onBlur(event: FocusEvent) {
    const radioGroupHasFocus = this.el.nativeElement.contains(event.relatedTarget);
    if (radioGroupHasFocus) {
      return;
    }

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

  private computeHorizontalOptionsAlignment() {
    let alignment: RowJustification = 'start';
    if (this.config().layout?.horizontal) {
      const itemsPerRow = Math.floor(12 / (this.config().layout?.optionsColumnSpan || 4));
      const hasMultipleRows = this.radioOptions().length > itemsPerRow;
      if (this.isRetailNonA1() && !hasMultipleRows) {
        alignment = 'center';
      }
    }
    return alignment;
  }

  private computeGroupLabelCol() {
    if (!this.isGroupLabelLeftAligned()) {
      return '12';
    }

    const span = this.config().layout?.optionsColumnSpan || 4;
    const containerWidth = this.formContainerWidth?.() ?? Infinity;
    return containerWidth <= CONTAINER_BREAKPOINT_M ? '12' : `${span}`;
  }
}