import {
    Directive,
    ElementRef,
    EventEmitter,
    HostListener,
    Input,
    Output,
} from '@angular/core';
import { ICaInput } from '../config';

@Directive({
    selector: '[commandVisible]',
    standalone: true,
})
export class CommandVisibleDirective {
    @Output() commandVisible = new EventEmitter<boolean>(); // ✅ Emit true/false
    @Input() restrictInput!: ICaInput;

    constructor(private el: ElementRef) {}

    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
        if ((event.key === 'Tab' && event.shiftKey) || event.key === 'Tab') {
            this.emitCommandVisible(false);
        }
    }

    @HostListener('blur')
    onWindowBlur() {
        this.emitCommandVisible(false);
    }

    @HostListener('focus')
    onFocus() {
        // Show commands on focus
        this.emitCommandVisible(true);
    }

    private emitCommandVisible(status: boolean) {
        if (this.restrictInput.commands) {
            this.commandVisible.emit(status);
        }
    }
}