import { ValidationConfig } from '@allianz/taly-core';
import { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import {
  AfterViewInit,
  Component,
  effect,
  ElementRef,
  Inject,
  InjectionToken,
  input,
  InputSignalWithTransform,
  OnInit,
  Optional,
  signal,
  ViewChild
} from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { NxDatefieldDirective, NxDatepickerComponent } from '@aposin/ng-aquila/datefield';
import { FORMFIELD_DEFAULT_OPTIONS, FormfieldDefaultOptions } from '@aposin/ng-aquila/formfield';
import { NxInputDirective } from '@aposin/ng-aquila/input';
import dayjs from 'dayjs';
import {
  DfDateConfig,
  DfDateDefaultValues,
  DfDateStartViewTypeFullDate,
  DfDateStartViewTypeMonthYearOnly
} from './date.model';

export const Df_DATE_PICKER_PARSE_FORMAT: InjectionToken<string> = new InjectionToken<string>(
  'Df_DATE_PICKER_PARSE_FORMAT'
);

const ISO_STRING_FORMAT = 'YYYY-MM-DD';

/*
Please see the readme for a background explanation of this implementation!
*/

@Component({
  selector: 'df-date',
  styleUrls: ['./date.component.scss'],
  templateUrl: './date.component.html',
  standalone: false
})
export class DfDateComponent
  extends DfBaseComponent<DfDateConfig>
  implements OnInit, AfterViewInit
{
  override control = input<UntypedFormControl>(new UntypedFormControl());
  override config: InputSignalWithTransform<DfDateConfig, DfDateConfig> = input.required({
    transform: (config: DfDateConfig) => {
      switch (config.value) {
        case DfDateDefaultValues.Today:
          // Changing the input config leads to a ExpressionChangedAfterItHasBeenCheckedError. So we use a copy:
          config = JSON.parse(JSON.stringify(config));
          config.value = dayjs().format(ISO_STRING_FORMAT);
          break;
        case DfDateDefaultValues.Yesterday:
          config = JSON.parse(JSON.stringify(config));
          config.value = dayjs().subtract(1, 'day').format(ISO_STRING_FORMAT);
          break;
        case DfDateDefaultValues.Tomorrow:
          config = JSON.parse(JSON.stringify(config));
          config.value = dayjs().add(1, 'day').format(ISO_STRING_FORMAT);
          break;
        default:
          break;
      }
      return config;
    }
  });

  minDate?: Date;
  maxDate?: Date;
  labelAlwaysFloating!: boolean;
  startView = signal<DfDateStartViewTypeFullDate | DfDateStartViewTypeMonthYearOnly>(
    DfDateStartViewTypeFullDate.Month
  );

  @ViewChild('dateField', { static: false }) dateField!: NxDatefieldDirective<unknown>;
  @ViewChild(NxInputDirective, { static: false }) inputField!: NxInputDirective;
  @ViewChild('pickerToggle', { read: ElementRef })
  datePickerToggle!: ElementRef<unknown>;
  @ViewChild('picker') datePicker!: NxDatepickerComponent<unknown>;

  constructor(
    @Optional() @Inject(Df_DATE_PICKER_PARSE_FORMAT) public parseFormatToken: string,
    @Optional()
    @Inject(FORMFIELD_DEFAULT_OPTIONS)
    private formfieldDefaultOptions: FormfieldDefaultOptions,
    private el: ElementRef
  ) {
    super();
    effect(() => {
      const validationConfigs = this.validationConfigs();
      if (validationConfigs) {
        this.disableInvalidDates(validationConfigs);
      }
    });
  }

  override ngOnInit() {
    super.ngOnInit();

    /* If the label is not floating, then we pass the label to the nx-formfield.
     ** TODO: exchange this logic when NDBX support that with this config is supported multiple lines
     */
    this.labelAlwaysFloating = this.formfieldDefaultOptions?.nxFloatLabel === 'always';

    this.emitFormControlEventOnValueChanges();
  }

  ngAfterViewInit(): void {
    const configValue = this.config();
    // First we set the inputs that are not always there:
    if (configValue.placeholder) {
      this.inputField.placeholder = configValue.placeholder;
    }
    this.configureDateFieldByMode(configValue);
  }

  configureDateFieldByMode(configValue: DfDateConfig) {
    const monthYearOnlyFormat = 'YYYY-MM';
    const yearOnlyFormat = 'YYYY';
    switch (configValue.mode) {
      case 'monthYearOnly':
        this.dateField.parseFormat = configValue.parseFormat || monthYearOnlyFormat;
        this.dateField.displayFormat = configValue.displayFormat || monthYearOnlyFormat;
        this.addPanelClass(configValue, 'month-year-only');
        this.startView.set(configValue.startView || DfDateStartViewTypeMonthYearOnly.MultiYear);
        break;
      case 'yearOnly':
        this.dateField.parseFormat = yearOnlyFormat;
        this.dateField.displayFormat = yearOnlyFormat;
        this.addPanelClass(configValue, 'year-only');
        this.startView.set(DfDateStartViewTypeFullDate.MultiYear);
        break;
      case 'fullDate':
        this.dateField.parseFormat = configValue.parseFormat || this.parseFormatToken;
        this.dateField.displayFormat = configValue.displayFormat || this.parseFormatToken;
        if (configValue.startView) this.startView.set(configValue.startView);
        break;
    }
  }

  addPanelClass(configValue: DfDateConfig, panelClass: string) {
    if (configValue.panelClass) {
      this.datePicker.panelClass = Array.isArray(configValue.panelClass)
        ? [...configValue.panelClass, panelClass]
        : [configValue.panelClass, panelClass];
    } else {
      this.datePicker.panelClass = panelClass;
    }
  }

  onBlur(event: FocusEvent) {
    // setTimeout() needed for focused element to be updated
    setTimeout(() => {
      const dateComponentHasFocus = this.el.nativeElement.contains(event.relatedTarget);
      // Separate check for datePicker because it is opened in an overlay outside of the date component
      if (dateComponentHasFocus || this.datePicker.opened) {
        return;
      }

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

  onInputBlur() {
    this.control()?.markAsTouched();
  }

  yearSelected(value: unknown): void {
    if (this.config().mode === 'yearOnly') {
      this.control()?.setValue(value);
      this.datePicker.close();
    }
  }

  monthSelected(value: unknown): void {
    if (this.config().mode === 'monthYearOnly') {
      this.control()?.setValue(value);
      this.datePicker.close();
    }
  }

  startAt(field?: DfDateConfig): Date | undefined {
    const startAt = this.retrieveConfigValue(field, 'startAt');
    return startAt ? new Date(startAt) : undefined;
  }

  private retrieveConfigValue<K extends keyof DfDateConfig>(
    field: DfDateConfig | undefined,
    value: K
  ): DfDateConfig[K] | undefined {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return (field || ({} as any))[value];
  }

  private disableInvalidDates(validators: ValidationConfig[]) {
    validators.forEach((validator) => {
      if (validator?.minDate) {
        this.minDate = new Date(validator.minDate);
      }
      if (validator?.maxDate) {
        this.maxDate = new Date(validator.maxDate);
      }
    });
  }
}