import {
  AfterContentInit,
  Component,
  ContentChild,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  Optional,
  Output,
  SimpleChanges,
  TemplateRef,
  ViewChild,
} from '@angular/core';
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { ValidatorHelper } from '../../helpers/validator.helper';
import { sleep } from '../../helpers/sleep.helper';
import { UniversalSafePipe } from '../../pipes/universal-safe/universal-safe.pipe';

/**
 * Represents an input component for selecting a numeric value within a specified range.
 *
 * This component allows users to input a numeric value within a defined range and provides visual feedback for the selected value.
 *
 * @implements {AfterContentInit}
 * @implements {OnChanges}
 *
 * <br>
 * <label for='id-exemple-range'>
 *  Example Input Range
 * </label>
 * <input
 *   class='range mb-3'
 *   name="name-exemple-range"
 *   id="id-exemple-range"
 *   type="range"
 * ></input>
 *
 * @example
 * <sq-input-range [name]='"input-range"' [(value)]='number' ></sq-input-range>
 */
@Component({
  selector: 'sq-input-range',
  templateUrl: './sq-input-range.component.html',
  styleUrls: ['./sq-input-range.component.scss'],
  standalone: true,
  imports: [NgClass, NgStyle, NgTemplateOutlet, FormsModule, UniversalSafePipe],
})
export class SqInputRangeComponent implements AfterContentInit, OnChanges {
  /**
   * A custom CSS class to apply to the input element.
   */
  @Input() customClass = '';

  /**
   * The name attribute for the input element.
   *
   * @default 'random-name-[hash-random-code]'
   */
  @Input() name = `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`;

  /**
   * The id attribute for the input element.
   */
  @Input() id?: string;

  /**
   * The initial value of the input.
   */
  @Input() value: any = '0';

  /**
   * Whether the input is read-only.
   */
  @Input() readonly = false;

  /**
   * Whether the input is required.
   */
  @Input() required = false;

  /**
   * The label to display for the input.
   */
  @Input() label = '';

  /**
   * The color of the input component.
   */
  @Input() color = 'var(--primary_color)';

  /**
   * The color of the input label.
   */
  @Input() labelColor = '';

  /**
   * Whether to display an error message below the input.
   */
  @Input() errorSpan = true;

  /**
   * An external error message, if provided.
   */
  @Input() externalError?: any;

  /**
   * The step value for the input.
   */
  @Input() step = 1;

  /**
   * The minimum allowed value for the input.
   */
  @Input() minNumber = 0;

  /**
   * The maximum allowed value for the input.
   */
  @Input() maxNumber = 100;

  /**
   * Whether to use form-level error messages.
   */
  @Input() useFormErrors = true;

  /**
   * Event emitter for changes in the input value.
   */
  @Output() valueChange: EventEmitter<any> = new EventEmitter();

  /**
   * Event emitter for focusing or blurring the input.
   */
  @Output() inFocus: EventEmitter<boolean> = new EventEmitter();

  /**
   * Event emitter for indicating the validity of the input.
   */
  @Output() valid: EventEmitter<boolean> = new EventEmitter();

  /**
   * Event emitter for focus input changes.
   */
  @Output() emitFocus: EventEmitter<Event> = new EventEmitter<Event>();

  /**
   * A reference to the 'valueFloating' element in the component template.
   */
  @ViewChild('valueFloating') valueFloating!: ElementRef;

  /**
   * A reference to the 'input' element in the component template.
   */
  @ViewChild('input') input!: ElementRef;

  /**
   * Reference to a label template.
   */
  @ContentChild('labelTemplate')
  labelTemplate: TemplateRef<HTMLElement> | null = null;

  /**
   * The error message associated with the input.
   */
  error: boolean | string = false;

  /**
   * A reference to the native element of the component.
   */
  nativeElement: ElementRef;

  /**
   * Creates an instance of `SqInputRangeComponent`.
   *
   * @param validatorHelper - An instance of the `ValidatorHelper` service.
   * @param element - A reference to the element hosting the component.
   * @param translate - An optional instance of the `TranslateService` for internationalization.
   */
  constructor(
    public validatorHelper: ValidatorHelper,
    element: ElementRef,
    @Optional() public translate: TranslateService
  ) {
    this.nativeElement = element.nativeElement;
  }

  /**
   * Lifecycle hook that runs after content initialization.
   * It sets a timeout to change the value position.
   */
  async ngAfterContentInit() {
    await sleep();
    this.changeValuePosition();
  }

  /**
   * Lifecycle hook that runs when changes occur in the component's input properties.
   * It recalculates the value position when value-related properties change.
   *
   * @param changes - An object containing changes to input properties.
   */
  ngOnChanges(changes: SimpleChanges) {
    if (changes.hasOwnProperty('value') || changes.hasOwnProperty('minNumber') || changes.hasOwnProperty('maxNumber')) {
      this.changeValuePosition();
    }
  }

  /**
   * Validates the input value.
   *
   * @param isBlur - Indicates whether the validation is triggered by blurring the input.
   */
  validate(isBlur = false) {
    if (this.externalError) {
      this.error = false;
    } else if (!!this.required && !this.value && this.value !== '0') {
      this.setError('forms.required');
      this.valid.emit(false);
    } else {
      this.valid.emit(true);
      this.error = '';
    }
    if (isBlur) {
      this.inFocus.emit(false);
    }
  }

  /**
   * Changes the visual position of the input value based on the current value,
   * minimum and maximum allowed values.
   */
  changeValuePosition() {
    const val = parseFloat(this.value);
    const min = this.minNumber ? this.minNumber : 0;
    const max = this.maxNumber ? this.maxNumber : 100;
    const newVal = Number(((val - min) * 100) / (max - min));
    if (this.valueFloating) {
      this.valueFloating.nativeElement.style.left = `calc(${newVal}% + (${10 - newVal * 0.36}px))`;
    }
  }

  /**
   * Handle input value changes.
   * @param event - The input change event.
   */
  change(event: any): void {
    this.inFocus.emit(true);
    this.changeValuePosition();
    this.value = event;
    this.valueChange.emit(event);
    this.validate();
  }

  /**
   * Set an error message based on a translation key.
   * @param key - The translation key for the error message.
   */
  async setError(key: string) {
    if (this.useFormErrors && this.translate) {
      this.error = await this.translate.instant(key);
    }
  }
}