import { Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, Output } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';

@Component({
    selector: 'app-autocomplete',
    templateUrl: './autocomplete.component.html',
    styleUrls: ['./autocomplete.component.css'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => AutocompleteComponent),
            multi: true
        }
    ],
    standalone: false
})
export class AutocompleteComponent implements ControlValueAccessor {
  @Input() opciones: any[] = [];
  @Input() placeholder: string = '';
  @Input() label: string = 'NOMBRE';
  @Output() seleccion = new EventEmitter<any>();
  @Output() error = new EventEmitter<{ field: string, message: string }>();
  searchText = new FormControl('');
  filteredOptions: any[] = [];
  showDropdown = false;

  private onChange = (_: any) => { };
  private onTouched = () => { };

  constructor(private eRef: ElementRef) { }

  // ------------------------------------

  ngOnInit() {
    this.filteredOptions = [...this.opciones];

    this.searchText.valueChanges.subscribe((value: any) => {
      this.filteredOptions = this._filter(value || '');
      this.onChange(value);

      // Validar si el valor no está en la lista de opciones
      // if (value && this.filteredOptions.length === 0) {
      //   this.error.emit({ field: this.placeholder.toLowerCase(), message: 'error' });
      // } else {
      //   this.error.emit({ field: this.placeholder.toLowerCase(), message: 'null' });
      // }
    });
  }

  selectOption(option: any) {
    if (this.opciones.some(item => item[this.label] === option[this.label])) {
      this.searchText.setValue(option[this.label]);
      this.seleccion.emit(option);
      this.onChange(option[this.label]);
      this.onTouched();
      this.showDropdown = false;
    }
    //   this.error.emit({ field: this.placeholder.toLowerCase(), message: 'null' });
    // } else {
    //   this.error.emit({ field: this.placeholder.toLowerCase(), message: 'error' });
    // }
  }

  // @HostListener('document:click', ['$event'])
  // handleClickOutside(event: Event) {
  //   if (!this.eRef.nativeElement.contains(event.target)) {
  //     const currentValue = this.searchText.value?.trim();

  //     // // Solo emitir error si hay un valor y no está en las opciones
  //     // if (currentValue && !this.opciones.some(item => item[this.label] === currentValue)) {
  //     //   this.error.emit({ field: this.placeholder.toLowerCase(), message: 'error' });
  //     // } else {
  //     //   this.error.emit({ field: this.placeholder.toLowerCase(), message: 'null' });
  //     // }

  //     this.showDropdown = false;
  //     this.onTouched();
  //   }
  // }


  // ------------------------------------



  // ngOnInit() {
  //   this.filteredOptions = [...this.opciones];

  //   this.searchText.valueChanges.subscribe((value: any) => {
  //     this.filteredOptions = this._filter(value || '');
  //     this.onChange(value);

  //     // Validar si el valor no está en la lista de opciones
  //     if (value && this.filteredOptions.length === 0) {
  //       this.error.emit('No se encontraron resultados');
  //     } else {
  //       this.error.emit('null'); // Limpiar el error si el valor es válido
  //     }
  //   });
  // }

  writeValue(value: any): void {
    this.searchText.setValue(value, { emitEvent: false });
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    if (isDisabled) {
      this.searchText.disable();
    } else {
      this.searchText.enable();
    }
  }


  // validateInput(value: string) {
  //   if (!value) {
  //     this.searchText.setErrors(null);
  //     return;
  //   }

  //   const isValid = this.opciones.some(option => option[this.label] === value);
  //   if (!isValid) {
  //     this.searchText.setErrors({ invalidOption: false });
  //   } else {
  //     this.searchText.setErrors(null);
  //   }
  // }

  private _filter(value: string): any[] {
    const filterValue = value.toLowerCase();
    return this.opciones.filter(item =>
      item[this.label]?.toLowerCase().includes(filterValue)
    );
  }

  // selectOption(option: any) {
  //   if (this.opciones.some(item => item[this.label] === option[this.label])) {
  //     this.searchText.setValue(option[this.label]);
  //     this.seleccion.emit(option);
  //     this.onChange(option[this.label]);
  //     this.onTouched();
  //     this.showDropdown = false;
  //     this.error.emit('null'); 
  //   } else {
  //     this.error.emit('La opción seleccionada no es válida');
  //   }
  // }

  showAllOptions() {
    if (this.searchText.value?.trim()) {
      this.filteredOptions = this._filter(this.searchText.value);
    } else {
      this.filteredOptions = [...this.opciones];
    }
    this.showDropdown = true;
  }

  // @HostListener('document:click', ['$event'])
  // handleClickOutside(event: Event) {
  //   if (!this.eRef.nativeElement.contains(event.target)) {
  //     const currentValue = this.searchText.value;
  //     if (currentValue && !this.opciones.some(item => item[this.label] === currentValue)) {
  //       this.error.emit('No se seleccionó una opción válida');
  //     }
  //     this.showDropdown = false;
  //     this.onTouched();
  //   }
  // }
}

