import {
  DfBaseComponent,
  DfOptions,
  DfOptionsProviderService
} from '@allianz/taly-core/dynamic-form';
import { RowJustification } from '@allianz/ng-aquila/grid';
import {
  Component,
  ElementRef,
  input,
  OnInit,
  inject,
  computed,
  Signal,
  signal,
  Injector,
  runInInjectionContext,
  DoCheck
} from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
import { of } 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
})
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 _elementRef = inject(ElementRef);

  private optionsProviderService = inject(DfOptionsProviderService, { optional: true });
  private injector = inject(Injector);

  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 checkboxOptions: Signal<DfOptions[]> = signal([]);
  protected horizontalOptionsAlignment = computed(() => this.computeHorizontalOptionsAlignment());
  protected groupLabelCol = computed(() => this.computeGroupLabelCol());
  protected labelCenter = computed(() => this.isRetailChannel() && this.groupLabelCol() === '12');
  protected optionColumnSpan = computed(() => {
    const layout = this.groupLayout();
    const columnSpan = (layout && layout.optionsColumnSpan) ?? this.DEFAULT_OPTION_COLUMN_SPAN;
    return `12, 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();

    if (this.config().type === 'CHECKBOX_GROUP') {
      this.checkboxOptions = this.getCheckboxOptions();
    }

    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;
      }
    }
  }

  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 {
    const layout = this.groupLayout();

    if (
      layout &&
      this.isRetailChannel() &&
      layout.horizontal !== true &&
      layout.groupLabelLeftAlignInRetail
    ) {
      const columnSpan = layout.optionsColumnSpan || this.DEFAULT_OPTION_COLUMN_SPAN;
      return `12, 12, ${columnSpan}`;
    }

    return '12';
  }

  private getCheckboxOptions(): Signal<DfOptions[]> {
    const groupConfig = this.config();

    if (groupConfig.type !== 'CHECKBOX_GROUP') {
      return signal([]);
    }

    if (Array.isArray(groupConfig.options)) {
      return signal(groupConfig.options);
    }

    if (typeof groupConfig.options === 'string' && this.optionsProviderService) {
      return runInInjectionContext(this.injector, () =>
        toSignal(
          this.optionsProviderService?.getDfOptions(groupConfig.options as string) ?? of([]),
          {
            initialValue: []
          }
        )
      );
    }

    return signal([]);
  }

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

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