import { AsyncPipe, NgClass } from '@angular/common';
import { NxCopytextModule } from '@allianz/ng-aquila/copytext';
import { NxGridModule } from '@allianz/ng-aquila/grid';
import { NxMessageModule } from '@allianz/ng-aquila/message';
import {
  NxTileComponent,
  NxTileGroupComponent,
  NxTileSelectionMode
} from '@allianz/ng-aquila/tile';
import {
  CONTAINER_BREAKPOINT_M,
  DfBaseComponent,
  DfBaseModule,
  DfInfoIconComponent,
  FORM_CONTAINER_WIDTH
} from '@allianz/taly-core/dynamic-form';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  ElementRef,
  inject,
  input,
  OnInit,
  Signal
} from '@angular/core';
import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import {
  DfTile,
  DfTileAutogridLayout,
  DfTileConfig,
  DfTileFixedWidthLayout,
  TileLayoutDirection,
  TileWidth
} from './tile.model';
import { NxFormfieldAppendixDirective } from '@allianz/ng-aquila/formfield';
import { NxLabelComponent, NxErrorComponent } from '@allianz/ng-aquila/base';

@Component({
  selector: 'df-tile',
  templateUrl: './tile.component.html',
  styleUrls: ['./tile.component.scss'],
  imports: [
    ReactiveFormsModule,
    AsyncPipe,
    NgClass,
    NxTileComponent,
    NxTileGroupComponent,
    NxGridModule,
    NxCopytextModule,
    NxMessageModule,
    DfBaseModule,
    DfInfoIconComponent,
    NxFormfieldAppendixDirective,
    NxLabelComponent,
    NxErrorComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfTileComponent extends DfBaseComponent<DfTileConfig> implements OnInit {
  override control = input<UntypedFormControl>(new UntypedFormControl());
  readonly tiles = computed<DfTile[]>(() => this.config().options);
  private el = inject(ElementRef);
  private formContainerWidth = inject(FORM_CONTAINER_WIDTH, { optional: true });

  private readonly isMobile = computed(
    () => (this.formContainerWidth?.() ?? Infinity) <= CONTAINER_BREAKPOINT_M
  );

  readonly useAutogrid = computed(() => this.config().layout?.useAutogrid ?? false);

  readonly maxColumns = computed(() => {
    const layout = this.config().layout;
    if (layout && this.isAutogridLayout(layout)) {
      return layout.maxColumns ?? 4;
    }
    return 4;
  });

  readonly tileLayout = computed(() => {
    const configLayout = this.config().layout?.tileLayout;
    const useFixedTileLayout =
      configLayout === TileLayoutDirection.Horizontal ||
      configLayout === TileLayoutDirection.Vertical;
    if (useFixedTileLayout) {
      return configLayout;
    }

    return this.isMobile() ? TileLayoutDirection.Horizontal : TileLayoutDirection.Vertical;
  });

  readonly tileWidth = computed(() => {
    const layout = this.config().layout;
    if (layout && this.isFixedWidthLayout(layout)) {
      return layout.tileWidth ?? TileWidth.Small;
    }
    return TileWidth.Small;
  });

  readonly selectionMode: Signal<NxTileSelectionMode> = computed(() =>
    this.config().multiSelect ? 'multi' : 'single'
  );

  readonly fixedTileWidth = computed(() => {
    if (this.useAutogrid()) {
      return null;
    }

    const layout = this.tileLayout();
    const width = this.tileWidth();

    const widthMap = {
      [TileLayoutDirection.Vertical]: {
        [TileWidth.Small]: 180,
        [TileWidth.Medium]: 210,
        [TileWidth.Large]: 240
      },
      [TileLayoutDirection.Horizontal]: {
        [TileWidth.Small]: 256,
        [TileWidth.Medium]: 291,
        [TileWidth.Large]: 327
      }
    };

    return widthMap[layout][width];
  });

  private isAutogridLayout(layout: DfTileConfig['layout']): layout is DfTileAutogridLayout {
    return layout !== undefined && layout.useAutogrid === true;
  }

  private isFixedWidthLayout(layout: DfTileConfig['layout']): layout is DfTileFixedWidthLayout {
    return layout !== undefined && layout.useAutogrid !== true;
  }

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

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

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