import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { ObjectAddress } from './models/object-address';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
import { IEventOptionAutocomplete } from './models/event-option-autocomplete.interface';
import { Option } from './models/option';
import { FormControl } from '@angular/forms';
import { Search, ChevronDown, X } from 'lucide-angular';

@Component({
    selector: 'kit-field-address',
    templateUrl: './field-address.component.html',
    styleUrls: ['./field-address.component.css']
})
export class FieldAddressComponent implements OnInit, OnChanges {
    @Input() fieldAddress: ObjectAddress[] = [];
    @Input() iconArrow:  boolean = false;
    @Output() changeEventSelect: EventEmitter<any> = new EventEmitter();
    @Output() changeEventAutocomplete: EventEmitter<IEventOptionAutocomplete> = new EventEmitter();

    public filteredOptionsSelectRegion$: Observable<Option[]> | undefined;
    public filteredOptionsSelect$:Observable<Option[]> | undefined;
    searchText: string = '';
    readonly searchI = Search;
    readonly xI = X;
    readonly chevronDownI = ChevronDown;

    constructor() { }

    ngOnInit() {
        this.optionsChange()
    }

    ngOnChanges(changes: SimpleChanges): void {
        if(changes['fieldAddress']) {
            this.optionsChange()
        }
    }

    private optionsChange() {
        const optionAutocomplete = this.fieldAddress.find((option: any) => option.type === 'selectRegion' );
        const existingValidatorsAutoComplete = optionAutocomplete?.controlForm.validator ? [optionAutocomplete?.controlForm.validator] : [];
        optionAutocomplete?.controlForm.setValidators([this.validateOptionAutocomplete.bind(this), ...existingValidatorsAutoComplete])
        this.filteredOptionsSelectRegion$ = optionAutocomplete?.controlForm?.valueChanges.pipe(
            startWith(''),
            map((value: any) => {
                const label = typeof value === 'string' ? value : value?.label;
                return label ? this._filter(label as string) : optionAutocomplete?.optionsSelect?.slice();
            }),
        );
        const optionSelect = this.fieldAddress.find((option: any) => option.type === 'select');
        const existingValidatorsSelect = optionSelect?.controlForm.validator ? [optionSelect?.controlForm.validator] : [];
        optionSelect?.controlForm.setValidators([this.validateOptionSelect.bind(this), ...existingValidatorsSelect])
        this.filteredOptionsSelect$ = optionSelect?.controlForm?.valueChanges.pipe(
            startWith(''),
            map((value: any) => {
                const label = typeof value === 'string' ? value : value?.label;
                return label ? this._filterSelect(label as string) : optionSelect?.optionsSelect?.slice();
            }),
        );
    }

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

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

    private _filter(label: string): any[] {
        const optionAutocomplete = this.fieldAddress.find((option: any) => option.type === 'selectRegion')
        const filterValue = label.toLowerCase();
        return optionAutocomplete?.optionsSelect?.filter(option => option.label.toLowerCase().includes(filterValue)) || [];
    }

    private _filterSelect(label: string): any[] {
        const select = this.fieldAddress.find((option: any) => option.type === 'select')
        const filterValue = label.toLowerCase();
        return select?.optionsSelect?.filter((opt: Option) => opt.label.toLowerCase().includes(filterValue)) || [];
    }

    onSelectOptionChange(event: any, idInput: string){
        this.changeEventAutocomplete.emit({...event, idInput});
    }

    private validateOptionSelect(control: FormControl) {
        const value = control.value;
        const option = this.fieldAddress.find((field: any) => field.type === 'select')
        if (value && !option?.optionsSelect?.some((opt: Option) => opt === value)) {
            return { invalidOption: true };
        }
        return null;
    }

    private validateOptionAutocomplete(control: FormControl) {
        const value = control.value;
        const option = this.fieldAddress.find((field: any) => field.type === 'selectRegion');
        if (value && !option?.optionsSelect?.some((opt: Option)=> opt.value === value.value)) {
            return { invalidOption: true };
        }
        return null;
    }

    public clearSelection(control: FormControl) {
        control.setValue(null);
    }

    isControlRequired(control: FormControl): boolean {
        if (control && control.validator) {
            const validator = control.validator({} as any);
            return !!(validator && validator['required']);
        }
        return false;
    }
}