/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import {
  booleanAttribute,
  computed,
  Directive,
  effect,
  ElementRef,
  inject,
  input,
  InputSignal,
  InputSignalWithTransform,
  model,
  ModelSignal,
  OnDestroy,
  OutputRefSubscription,
  Signal,
  signal,
} from '@angular/core';
import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core';
import {
  AbstractControl,
  ControlValueAccessor,
  NG_VALIDATORS,
  NG_VALUE_ACCESSOR,
  ValidationErrors,
  Validator,
  ValidatorFn,
  Validators,
} from '@angular/forms';
import {MAT_FORM_FIELD} from '@angular/material/form-field';
import {MatTimepicker} from './timepicker';
import {MAT_INPUT_VALUE_ACCESSOR} from '@angular/material/input';
import {Subscription} from 'rxjs';
import {DOWN_ARROW, ESCAPE, hasModifierKey, UP_ARROW} from '@angular/cdk/keycodes';
import {validateAdapter} from './util';
import {DOCUMENT} from '@angular/common';

/**
 * Input that can be used to enter time and connect to a `mat-timepicker`.
 */
@Directive({
  selector: 'input[matTimepicker]',
  exportAs: 'matTimepickerInput',
  host: {
    'class': 'mat-timepicker-input',
    'role': 'combobox',
    'type': 'text',
    'aria-haspopup': 'listbox',
    '[attr.aria-activedescendant]': '_ariaActiveDescendant()',
    '[attr.aria-expanded]': '_ariaExpanded()',
    '[attr.aria-controls]': '_ariaControls()',
    '[attr.mat-timepicker-id]': 'timepicker()?.panelId',
    '[disabled]': 'disabled()',
    '(blur)': '_handleBlur()',
    '(input)': '_handleInput($event.target.value)',
    '(keydown)': '_handleKeydown($event)',
  },
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: MatTimepickerInput,
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: MatTimepickerInput,
      multi: true,
    },
    {
      provide: MAT_INPUT_VALUE_ACCESSOR,
      useExisting: MatTimepickerInput,
    },
  ],
})
export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, OnDestroy {
  private _elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
  private _document = inject(DOCUMENT);
  private _dateAdapter = inject<DateAdapter<D>>(DateAdapter, {optional: true})!;
  private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!;
  private _formField = inject(MAT_FORM_FIELD, {optional: true});

  private _onChange: ((value: any) => void) | undefined;
  private _onTouched: (() => void) | undefined;
  private _validatorOnChange: (() => void) | undefined;
  private _accessorDisabled = signal(false);
  private _localeSubscription: Subscription;
  private _timepickerSubscription: OutputRefSubscription | undefined;
  private _validator: ValidatorFn;
  private _lastValueValid = true;
  private _lastValidDate: D | null = null;

  /** Value of the `aria-activedescendant` attribute. */
  protected readonly _ariaActiveDescendant = computed(() => {
    const timepicker = this.timepicker();
    const isOpen = timepicker.isOpen();
    const activeDescendant = timepicker.activeDescendant();
    return isOpen && activeDescendant ? activeDescendant : null;
  });

  /** Value of the `aria-expanded` attribute. */
  protected readonly _ariaExpanded = computed(() => this.timepicker().isOpen() + '');

  /** Value of the `aria-controls` attribute. */
  protected readonly _ariaControls = computed(() => {
    const timepicker = this.timepicker();
    return timepicker.isOpen() ? timepicker.panelId : null;
  });

  /** Current value of the input. */
  readonly value: ModelSignal<D | null> = model<D | null>(null);

  /** Timepicker that the input is associated with. */
  readonly timepicker: InputSignal<MatTimepicker<D>> = input.required<MatTimepicker<D>>({
    alias: 'matTimepicker',
  });

  /**
   * Minimum time that can be selected or typed in. Can be either
   * a date object (only time will be used) or a valid time string.
   */
  readonly min: InputSignalWithTransform<D | null, unknown> = input(null, {
    alias: 'matTimepickerMin',
    transform: (value: unknown) => this._transformDateInput<D>(value),
  });

  /**
   * Maximum time that can be selected or typed in. Can be either
   * a date object (only time will be used) or a valid time string.
   */
  readonly max: InputSignalWithTransform<D | null, unknown> = input(null, {
    alias: 'matTimepickerMax',
    transform: (value: unknown) => this._transformDateInput<D>(value),
  });

  /** Whether the input is disabled. */
  readonly disabled: Signal<boolean> = computed(
    () => this.disabledInput() || this._accessorDisabled(),
  );

  /**
   * Whether the input should be disabled through the template.
   * @docs-private
   */
  readonly disabledInput: InputSignalWithTransform<boolean, unknown> = input(false, {
    transform: booleanAttribute,
    alias: 'disabled',
  });

  constructor() {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      validateAdapter(this._dateAdapter, this._dateFormats);
    }

    this._validator = this._getValidator();
    this._respondToValueChanges();
    this._respondToMinMaxChanges();
    this._registerTimepicker();
    this._localeSubscription = this._dateAdapter.localeChanges.subscribe(() => {
      if (!this._hasFocus()) {
        this._formatValue(this.value());
      }
    });

    // Bind the click listener manually to the overlay origin, because we want the entire
    // form field to be clickable, if the timepicker is used in `mat-form-field`.
    this.getOverlayOrigin().nativeElement.addEventListener('click', this._handleClick);
  }

  /**
   * Implemented as a part of `ControlValueAccessor`.
   * @docs-private
   */
  writeValue(value: any): void {
    this.value.set(this._dateAdapter.getValidDateOrNull(value));
  }

  /**
   * Implemented as a part of `ControlValueAccessor`.
   * @docs-private
   */
  registerOnChange(fn: (value: any) => void): void {
    this._onChange = fn;
  }

  /**
   * Implemented as a part of `ControlValueAccessor`.
   * @docs-private
   */
  registerOnTouched(fn: () => void): void {
    this._onTouched = fn;
  }

  /**
   * Implemented as a part of `ControlValueAccessor`.
   * @docs-private
   */
  setDisabledState(isDisabled: boolean): void {
    this._accessorDisabled.set(isDisabled);
  }

  /**
   * Implemented as a part of `Validator`.
   * @docs-private
   */
  validate(control: AbstractControl): ValidationErrors | null {
    return this._validator(control);
  }

  /**
   * Implemented as a part of `Validator`.
   * @docs-private
   */
  registerOnValidatorChange(fn: () => void): void {
    this._validatorOnChange = fn;
  }

  /** Gets the element to which the timepicker popup should be attached. */
  getOverlayOrigin(): ElementRef<HTMLElement> {
    return this._formField?.getConnectedOverlayOrigin() || this._elementRef;
  }

  /** Focuses the input. */
  focus(): void {
    this._elementRef.nativeElement.focus();
  }

  ngOnDestroy(): void {
    this.getOverlayOrigin().nativeElement.removeEventListener('click', this._handleClick);
    this._timepickerSubscription?.unsubscribe();
    this._localeSubscription.unsubscribe();
  }

  /** Gets the ID of the input's label. */
  _getLabelId(): string | null {
    return this._formField?.getLabelId() || null;
  }

  /** Handles clicks on the input or the containing form field. */
  private _handleClick = (): void => {
    this.timepicker().open();
  };

  /** Handles the `input` event. */
  protected _handleInput(value: string) {
    const currentValue = this.value();
    const date = this._dateAdapter.parseTime(value, this._dateFormats.parse.timeInput);
    const hasChanged = !this._dateAdapter.sameTime(date, currentValue);

    if (!date || hasChanged || !!(value && !currentValue)) {
      // We need to fire the CVA change event for all nulls, otherwise the validators won't run.
      this._assignUserSelection(date, true);
    } else {
      // Call the validator even if the value hasn't changed since
      // some fields change depending on what the user has entered.
      this._validatorOnChange?.();
    }
  }

  /** Handles the `blur` event. */
  protected _handleBlur() {
    const value = this.value();

    // Only reformat on blur so the value doesn't change while the user is interacting.
    if (value && this._isValid(value)) {
      this._formatValue(value);
    }

    this._onTouched?.();
  }

  /** Handles the `keydown` event. */
  protected _handleKeydown(event: KeyboardEvent) {
    // All keyboard events while open are handled through the timepicker.
    if (this.timepicker().isOpen()) {
      return;
    }

    if (event.keyCode === ESCAPE && !hasModifierKey(event) && this.value() !== null) {
      event.preventDefault();
      this.value.set(null);
      this._formatValue(null);
    } else if ((event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) && !this.disabled()) {
      event.preventDefault();
      this.timepicker().open();
    }
  }

  /** Sets up the code that watches for changes in the value and adjusts the input. */
  private _respondToValueChanges(): void {
    effect(() => {
      const value = this._dateAdapter.deserialize(this.value());
      const wasValid = this._lastValueValid;
      this._lastValueValid = this._isValid(value);

      // Reformat the value if it changes while the user isn't interacting.
      if (!this._hasFocus()) {
        this._formatValue(value);
      }

      if (value && this._lastValueValid) {
        this._lastValidDate = value;
      }

      // Trigger the validator if the state changed.
      if (wasValid !== this._lastValueValid) {
        this._validatorOnChange?.();
      }
    });
  }

  /** Sets up the logic that registers the input with the timepicker. */
  private _registerTimepicker(): void {
    effect(() => {
      const timepicker = this.timepicker();
      timepicker.registerInput(this);
      timepicker.closed.subscribe(() => this._onTouched?.());
      timepicker.selected.subscribe(({value}) => {
        if (!this._dateAdapter.sameTime(value, this.value())) {
          this._assignUserSelection(value, true);
          this._formatValue(value);
        }
      });
    });
  }

  /** Sets up the logic that adjusts the input if the min/max changes. */
  private _respondToMinMaxChanges(): void {
    effect(() => {
      // Read the min/max so the effect knows when to fire.
      this.min();
      this.max();
      this._validatorOnChange?.();
    });
  }

  /**
   * Assigns a value set by the user to the input's model.
   * @param selection Time selected by the user that should be assigned.
   * @param propagateToAccessor Whether the value should be propagated to the ControlValueAccessor.
   */
  private _assignUserSelection(selection: D | null, propagateToAccessor: boolean) {
    if (selection == null || !this._isValid(selection)) {
      this.value.set(selection);
    } else {
      // If a datepicker and timepicker are writing to the same object and the user enters an
      // invalid time into the timepicker, we may end up clearing their selection from the
      // datepicker. If the user enters a valid time afterwards, the datepicker's selection will
      // have been lost. This logic restores the previously-valid date and sets its time to
      // the newly-selected time.
      const adapter = this._dateAdapter;
      const target = adapter.getValidDateOrNull(this._lastValidDate || this.value());
      const hours = adapter.getHours(selection);
      const minutes = adapter.getMinutes(selection);
      const seconds = adapter.getSeconds(selection);
      this.value.set(target ? adapter.setTime(target, hours, minutes, seconds) : selection);
    }

    if (propagateToAccessor) {
      this._onChange?.(this.value());
    }
  }

  /** Formats the current value and assigns it to the input. */
  private _formatValue(value: D | null): void {
    value = this._dateAdapter.getValidDateOrNull(value);
    this._elementRef.nativeElement.value =
      value == null ? '' : this._dateAdapter.format(value, this._dateFormats.display.timeInput);
  }

  /** Checks whether a value is valid. */
  private _isValid(value: D | null): boolean {
    return !value || this._dateAdapter.isValid(value);
  }

  /** Transforms an arbitrary value into a value that can be assigned to a date-based input. */
  private _transformDateInput<D>(value: unknown): D | null {
    const date =
      typeof value === 'string'
        ? this._dateAdapter.parseTime(value, this._dateFormats.parse.timeInput)
        : this._dateAdapter.deserialize(value);
    return date && this._dateAdapter.isValid(date) ? (date as D) : null;
  }

  /** Whether the input is currently focused. */
  private _hasFocus(): boolean {
    return this._document.activeElement === this._elementRef.nativeElement;
  }

  /** Gets a function that can be used to validate the input. */
  private _getValidator(): ValidatorFn {
    return Validators.compose([
      () =>
        this._lastValueValid
          ? null
          : {'matTimepickerParse': {'text': this._elementRef.nativeElement.value}},
      control => {
        const controlValue = this._dateAdapter.getValidDateOrNull(
          this._dateAdapter.deserialize(control.value),
        );
        const min = this.min();
        return !min || !controlValue || this._dateAdapter.compareTime(min, controlValue) <= 0
          ? null
          : {'matTimepickerMin': {'min': min, 'actual': controlValue}};
      },
      control => {
        const controlValue = this._dateAdapter.getValidDateOrNull(
          this._dateAdapter.deserialize(control.value),
        );
        const max = this.max();
        return !max || !controlValue || this._dateAdapter.compareTime(max, controlValue) >= 0
          ? null
          : {'matTimepickerMax': {'max': max, 'actual': controlValue}};
      },
    ])!;
  }
}