import { Component, EventEmitter, Input, Output } from '@angular/core';
import { IOption } from './interfaces/option.interface';
import { MatOption } from '@angular/material/core';
import { ChevronDown, CircleAlert } from 'lucide-angular';

@Component({
    selector: 'kit-basic-select',
    templateUrl: './basic-select.component.html',
})
export class BasicSelectComponent {

    @Input() control: any;
    @Input() options: IOption[] = [];
    @Input() placeholderText: string = '';
    @Input() label: string = '';
    @Input() isMultipleSelect = false;
    @Input() valueOptionIsNotObject = false;
    @Input() descriptionTooltip: string = '';
    @Output() changeEvent: EventEmitter<MatOption<IOption>> = new EventEmitter();
    readonly chevronDownI = ChevronDown;
    readonly infoCircle = CircleAlert;

    constructor() { }

    defaultCompareWithFn = (o1: any, o2: any) => o1 === o2;
    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
    }

    onChange(event: any){
        this.changeEvent.emit(event);
    }
}