import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChevronDown, CircleAlert } from 'lucide-angular';

@Component({
    selector: 'kit-multi-select',
    templateUrl: './multi-select.component.html',
    styleUrls: ['../styles/index.scss'],

})
export class MultiSelectComponent {
    @Input() control:  any;
    @Input() options?: any[] = [];
    @Input() placeholderText: string = '';
    @Input() isLoading = false;    
    @Input() label: string = ''; 
    @Input() isMultipleSelect = false; 
    @Input() valueOptionIsNotObject = false;
    @Output() changeEvent: EventEmitter<any> = new EventEmitter();
    @Input() descriptionTooltip: string = '';
    defaultCompareWithFn = (o1: any, o2: any) => o1 === o2;
    readonly chevronDownI = ChevronDown;
    onChange(event: any){
        this.changeEvent.emit(event);
    }
    readonly infoCircle = CircleAlert;
    compareWithFn(o1: any, o2: any): boolean {
        return o1 && o2 ? o1.value === o2.value : o1 === o2;
    }
    isControlRequired(): boolean {
        if( this.control && this.control.validator) {
            const validator = this.control.validator({} as any);
            return !!(validator && validator.required);
        }
        return false
    }
}