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

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
{
  parseFormatToken = inject(Df_DATE_PICKER_PARSE_FORMAT, { optional: true });
  private el = inject(ElementRef);

  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;
  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() {
    super();
    effect(() => {
      const validationConfigs = this.validationConfigs();
      if (validationConfigs) {
        this.disableInvalidDates(validationConfigs);
      }
    });
  }

  override ngOnInit() {
    super.ngOnInit();

    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':
        if (configValue.parseFormat) {
          this.dateField.parseFormat = configValue.parseFormat;
        } else if (this.parseFormatToken) {
          this.dateField.parseFormat = this.parseFormatToken;
        }

        if (configValue.displayFormat) {
          this.dateField.displayFormat = configValue.displayFormat;
        } else if (this.parseFormatToken) {
          this.dateField.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.setSelectedDate(this.control().value);
      this.emitFormEvent('onBlurEvent', this.control().value);
    }, 0);
  }

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

  formatDateByMode(date: Date): string {
    const mode = this.config().mode;
    switch (mode) {
      case 'yearOnly':
        return dayjs(date).format('YYYY');
      case 'monthYearOnly':
        return dayjs(date).format('YYYY-MM');
      case 'fullDate':
      default:
        return dayjs(date).format(ISO_STRING_FORMAT);
    }
  }

  isValidDate(dateValue: any): dateValue is Date {
    return dayjs(dateValue).isValid();
  }

  yearSelected(value: unknown): void {
    if (!(this.config().mode === 'yearOnly')) {
      return;
    }
    this.setSelectedDate(value);
    this.datePicker.close();
  }

  monthSelected(value: unknown): void {
    if (!(this.config().mode === 'monthYearOnly')) {
      return;
    }
    this.setSelectedDate(value);
    this.datePicker.close();
  }

  setSelectedDate(value: unknown): void {
    if (!this.isValidDate(value)) {
      return;
    }
    const formattedValue = this.formatDateByMode(value);
    this.control()?.setValue(formattedValue);
  }

  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) {
        if (typeof validator.minDate === 'string') {
          this.minDate = new Date(validator.minDate);
        } else {
          validator.minDate.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((dateValue) => {
            if (dateValue) {
              this.minDate = new Date(dateValue);
            } else {
              this.minDate = undefined;
            }
          });
        }
      }
      if (validator?.maxDate) {
        if (typeof validator.maxDate === 'string') {
          this.maxDate = new Date(validator.maxDate);
        } else {
          validator.maxDate.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((dateValue) => {
            if (dateValue) {
              this.maxDate = new Date(dateValue);
            } else {
              this.maxDate = undefined;
            }
          });
        }
      }
    });
  }

  onDatePickerClosed() {
    setTimeout(() => {
      const nativeInput = this.inputField.elementRef.nativeElement;
      nativeInput.focus();
      nativeInput.blur();
    }, 0);
  }
}