import { Component, Input } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { Observable, distinctUntilChanged, map, of } from 'rxjs';
import { OptionSelect } from '../../interface/option-select.interface';
import { Filter } from '../../interface/filter.interface';
import { FilterAutocomplete } from '../../class';
import { Search } from 'lucide-angular';
import { Utils } from '../../common/utils';
@Component({
    selector: 'kit-toolbar-filter-autocomplete',
    templateUrl: './toolbar-filter-autocomplete.component.html'
})
  
export class ToolbarFilterAutocompleteComponent{

    @Input() filterForm: FormControl = new FormControl({});
    @Input() iconArrow:  boolean = false;
    public filteredOptions: Observable<OptionSelect[]> | undefined;
    public readonly searchI = Search;

    private _filter :Filter = new FilterAutocomplete();
    
    public constructor(){}

    @Input() public set filter(filter:Filter){
        this._filter = filter;
        this.setFilteredOptions()
    }

    public get filter(){        
        return this._filter;
    }

    displayFn(option: any): string {
        return option && option.label ? option.label : '';
    }

    setFilteredOptions(){
        this.filteredOptions = of(this.filter).pipe(
            distinctUntilChanged(),
            map(filter => filter.values ? filter.values : [] )
        );
    }

    isControlRequired(): boolean {
        return this.filterForm.hasValidator(Validators.required); 
    }

    public validateError() {
        return this.filter?.errors ? Utils.validateError(this.filterForm, this.filter?.errors) : [];
    }
   
}