import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Mask } from './models/mask';
import { IAffixes } from './interfaces/affixes.interface';
import { LabelAction, LabelActionEvent } from './interfaces/label-action.interface';
import { CircleAlert } from 'lucide-angular';

@Component({
    selector: 'kit-input',
    templateUrl: './input.component.html',
    styleUrls: ['../styles/index.scss']
})
export class InputComponent  {
    @Input() placeholderText: string = '';  
    @Input() type: string = ''; 
    @Input() label: string = ''; 
    @Input() minlength?: number;
    @Input() maxlength?: number;
    @Input() control: FormControl | any;
    @Input() mask?: Mask | any;
    @Input() messageErrorCustom: string = '';
    @Input() affixes: IAffixes|null = null
    @Input() labelActions: LabelAction[] = [];
    @Input() descriptionTooltip: string = '';
    
    @Output() clickIcon: EventEmitter<MouseEvent> = new EventEmitter();
    @Output() labelActionClicked: EventEmitter<LabelActionEvent> = new EventEmitter();

    readonly infoCircle = CircleAlert;

    onClickIcon(event: MouseEvent) {
        this.clickIcon.emit(event)
    }
    onLabelActionClick(action: LabelAction) {
        if (!action.disabled) {
            this.labelActionClicked.emit({
                actionId: action.id,
                action
            });
        }
    }
    isControlRequired(): boolean {
        if(this.control && this.control.validator) {
            const validator = this.control.validator({} as any);
            return !!(validator && validator.required);
        }
        return false
    }
}