import {
  CONTAINER_BREAKPOINT_M,
  DfBaseComponent,
  DfOptions,
  DfOptionsProviderService,
  FORM_CONTAINER_WIDTH
} from '@allianz/taly-core/dynamic-form';
import { RowJustification } from '@allianz/ng-aquila/grid';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  computed,
  DoCheck,
  ElementRef,
  inject,
  input,
  OnInit,
  Signal
} from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
import { of, switchMap } from 'rxjs';
import { CheckboxLabelSize, DfCheckboxConfig, DfCheckboxGroupConfig } from './checkbox.model';
import { ErrorStateMatcher } from '@allianz/ng-aquila/utils';

@Component({
  selector: 'df-checkbox',
  styleUrls: ['./checkbox.component.scss'],
  templateUrl: './checkbox.component.html',
  standalone: false,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfCheckboxComponent
  extends DfBaseComponent<DfCheckboxConfig | DfCheckboxGroupConfig>
  implements OnInit, DoCheck
{
  private readonly _parentForm = inject(NgForm, { optional: true });
  private readonly _parentFormGroup = inject(FormGroupDirective, { optional: true });
  private readonly errorStateMatcher = inject(ErrorStateMatcher);
  private readonly cdr = inject(ChangeDetectorRef);

  private readonly _elementRef = inject(ElementRef);

  private optionsProviderService = inject(DfOptionsProviderService, { optional: true });
  private formContainerWidth = inject(FORM_CONTAINER_WIDTH, { optional: true });

  private groupLayout = computed(() => {
    const config = this.config();
    return config.type === 'CHECKBOX_GROUP' ? config.layout ?? null : null;
  });

  private readonly DEFAULT_OPTION_COLUMN_SPAN = 4;

  protected errorState = false;
  protected readonly checkboxOptions: Signal<DfOptions[]> = toSignal(
    toObservable(this.config).pipe(
      switchMap((config) => {
        if (config.type !== 'CHECKBOX_GROUP') return of([]);
        if (Array.isArray(config.options)) return of(config.options);
        if (typeof config.options === 'string' && this.optionsProviderService) {
          return this.optionsProviderService.getDfOptions(config.options);
        }
        return of([]);
      })
    ),
    { initialValue: [] }
  );
  protected horizontalOptionsAlignment = computed(() => this.computeHorizontalOptionsAlignment());
  private isGroupLabelLeftAligned = computed(() => {
    const layout = this.groupLayout();
    return !!(
      layout &&
      this.isRetailChannel() &&
      layout.horizontal !== true &&
      layout.groupLabelLeftAlignInRetail
    );
  });
  protected groupLabelCol = computed(() => this.computeGroupLabelCol());
  protected labelCenter = computed(() => this.isRetailChannel() && !this.isGroupLabelLeftAligned());
  protected optionColumnSpan = computed(() => {
    const layout = this.groupLayout();
    const columnSpan = (layout && layout.optionsColumnSpan) ?? this.DEFAULT_OPTION_COLUMN_SPAN;
    const containerWidth = this.formContainerWidth?.() ?? Infinity;
    return containerWidth <= CONTAINER_BREAKPOINT_M ? '12' : `${columnSpan}`;
  });

  override control = input<UntypedFormControl>(new UntypedFormControl());
  isHorizontal = computed(() => !!this.groupLayout()?.horizontal);
  isCheckboxGroup = computed(() => this.config().type === 'CHECKBOX_GROUP');
  protected labelSize = computed(() =>
    this.config().labelSizeSmall ? CheckboxLabelSize.Small : CheckboxLabelSize.Large
  );

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

  ngDoCheck(): void {
    const controlValue = this.control();
    if (controlValue) {
      // We follow the Aquila approach with the ErrorStateMatcher here:
      // We need to re-evaluate this on every change detection cycle, because there are some
      // error triggers that we can't subscribe to (e.g. parent form submissions). This means
      // that whatever logic is in here has to be super lean or we risk destroying the performance.
      const newErrorState = this.errorStateMatcher.isErrorState(
        controlValue,
        this._parentFormGroup || this._parentForm
      );

      if (this.errorState !== newErrorState) {
        this.errorState = newErrorState;
        this.cdr.markForCheck();
      }
    }
  }

  private computeHorizontalOptionsAlignment(): RowJustification {
    const layout = this.groupLayout();

    if (!layout?.horizontal) return 'start';

    const itemsPerRow = Math.floor(
      12 / (layout.optionsColumnSpan || this.DEFAULT_OPTION_COLUMN_SPAN)
    );
    const hasMultipleRows = this.checkboxOptions().length > itemsPerRow;

    return this.isRetailChannel() && !hasMultipleRows ? 'center' : 'start';
  }

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

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

  onBlur(event: FocusEvent): void {
    const checkboxGroupHasFocus = this._elementRef.nativeElement.contains(event.relatedTarget);

    if (!checkboxGroupHasFocus) {
      this.emitFormEvent('onBlurEvent', this.control().value);
    }
  }
}