import { CommonModule } from '@angular/common';
import { Component, forwardRef, Input, OnInit, OnDestroy } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgxCurrencyDirective } from 'ngx-currency';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { BaseInputComponent } from '../base-input/base-input.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import { ValidationMessagesService } from '../validation-messages.service';

@Component({
  selector: 'app-validated-price',
  standalone: true,
  imports: [CommonModule, FormsModule, TooltipComponent, NgxCurrencyDirective],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ValidatedPriceComponent),
      multi: true,
    },
  ],
  templateUrl: './validated-price.component.html',
  styles: `:host{width:100%}`,
})
export class ValidatedPriceComponent extends BaseInputComponent implements OnInit, OnDestroy {
  @Input() inputClasses: string;
  @Input() placeholder: string = '';
  @Input() debounceTimeMs: number = 400; // Configurable debounce time in milliseconds

  private inputChange$ = new Subject<any>();
  private destroy$ = new Subject<void>();

  constructor(validationMessagesService: ValidationMessagesService) {
    super(validationMessagesService);
  }

  override ngOnInit(): void {
    // Setup debounced onChange
    this.inputChange$
      .pipe(
        debounceTime(this.debounceTimeMs),
        takeUntil(this.destroy$)
      )
      .subscribe(value => {
        this.value = value;
        this.onChange(this.value);
      });
  }

  override ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  onInputChange(event: Event): void {
    const newValue = !event ? null : event;
    // Send signal to Subject instead of calling onChange directly
    this.inputChange$.next(newValue);
  }
}