import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { DIRECTION_TYPE } from './enum';
import { Config, IRadioOptions } from './interface/IRadioOptions';
import { CircleAlert } from 'lucide-angular';

type TSelected = string | number | null;

@Component({
    selector: 'kit-radio',
    templateUrl: './radio.component.html',
    styleUrl: './radio.component.css',
})
export class RadioComponent {
    @Input() options!: IRadioOptions[];
    @Input() title: string | null = null;
    @Input() label: string | null = null;
    @Input() style: string = 'empty'; //'empty' | 'filled'
    @Output() handleRadio = new EventEmitter<TSelected>();
    @Input() direction: DIRECTION_TYPE = DIRECTION_TYPE.HORIZONTAL; //'HORIZONTAL | VERTICAL
    @Input() control: AbstractControl | any = null;
    @Input() defaultValue: string | number | null = '';
    @Input() styleTextDirection: string = '';
    @Input() config?: Config;
    @Input() descriptionTooltip: string = '';
    selected: TSelected = null;
    readonly infoCircle = CircleAlert;

    handleSelected(selected: TSelected) {
        this.handleRadio.emit(selected);
    }

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