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

@Component({
    selector: 'kit-chip-selector',
    templateUrl: './chip-selector.component.html',
})
export class ChipSelectorComponent {
    @Input() control: any;
    @Input() options: IOption[] = [];
    @Input() value: string | string[] | null = null;
    @Input() label: string = '';
    @Input() isFormDisabled: boolean = false;
    @Input() multiple: boolean = false;
    @Input() descriptionTooltip: string = '';

    @Output() changeEvent: EventEmitter<MatChipListboxChange> = new EventEmitter();
    constructor() { }

    readonly infoCircle = CircleAlert;
    
    onSelectionChange(event: MatChipListboxChange) {
        // Emitimos el evento original para mantener compatibilidad con código existente
        this.changeEvent.emit(event);
    }

    isSelected(optionValue: string): boolean { 
        
        return Array.isArray(this.value) && this.value.includes(optionValue);
    }
}