import { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  effect,
  ElementRef,
  Inject,
  InjectionToken,
  input,
  InputSignalWithTransform,
  OnInit,
  Optional,
  ViewChild
} from '@angular/core';
import { AbstractControl, UntypedFormControl, ValidationErrors } 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, DfDateStartViewType } from './date.model';
import { ValidationConfig } from '@allianz/taly-core';

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

  readonly StartViewType = DfDateStartViewType;

  // Let's not disturb the user while the focus is on the input field
  private inputFocused = false;

  private requiredValidatorSet = false;

  minDate?: Date;
  maxDate?: Date;
  labelAlwaysFloating!: boolean;

  @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,
    private cdr: ChangeDetectorRef,
    @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;
    }
    if (configValue.parseFormat) {
      this.dateField.parseFormat = configValue.parseFormat
        ? configValue.parseFormat
        : this.parseFormatToken;
    }
    if (configValue.displayFormat) {
      this.dateField.displayFormat = configValue.displayFormat;
    }
    if (configValue.panelClass) {
      this.datePicker.panelClass = configValue.panelClass;
    }
  }

  requiredDateFormFieldValidator(c: AbstractControl): ValidationErrors | null {
    return c.value || !this.requiredValidatorSet ? null : { required: true };
  }

  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.inputFocused = false;
    this.control()?.markAsTouched();
  }

  onFocus() {
    this.inputFocused = true;
  }

  yearSelected(value: unknown): void {
    if (this.config().onlyYears) {
      this.control()?.setValue(value);
      this.datePicker.close();
    }
  }

  monthSelected(value: unknown): void {
    if (this.config().dayDisabled) {
      this.control()?.setValue(value);
      this.datePicker.close();
    }
  }

  dateType(field?: DfDateConfig): DfDateStartViewType | undefined {
    return this.retrieveConfigValue(field, 'startView');
  }

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