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

@Directive({
    selector: '[appCapsLock]',
    standalone: true,
})
export class CapsLockDirective {
    @Output() capsLockStatus = new EventEmitter<boolean>(); // ✅ Emit true/false

    private capsLockDetected = false;

    constructor(private el: ElementRef) {}

    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
        const capsLockOn = event.getModifierState?.('CapsLock');
        this.capsLockStatus.emit(capsLockOn); // Emit true when Caps Lock is ON
        this.capsLockDetected = capsLockOn;
    }

    @HostListener('keyup', ['$event'])
    onKeyUP(event: KeyboardEvent) {
        const capsLockOn = event.getModifierState?.('CapsLock');
        this.capsLockStatus.emit(capsLockOn); // Emit true when Caps Lock is ON
        this.capsLockDetected = capsLockOn;
    }

    @HostListener('focus')
    onFocus() {
        // Simulate a key press to check if Caps Lock is on
        this.capsLockStatus.emit(this.capsLockDetected);
    }

    @HostListener('blur')
    onBlur() {
        this.capsLockStatus.emit(false); // Hide message when input loses focus
    }
}