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

@Directive({
    selector: '[trackFocus]',
})
export class TrackFocusDirective {
    public lastEventWasMouse = true;
    private _mouseFocusClass = 'is-focus--mouse';

    @HostListener('keydown')
    public keydown() {
        this.lastEventWasMouse = false;
    }

    @HostListener('mouseup')
    public mouseup() {
        this.lastEventWasMouse = true;
    }

    @HostListener('focusin', ['$event'])
    public focusin(event: Event) {
        if (this.lastEventWasMouse) {
            (
                event.target as HTMLElement
            ).classList.add(this._mouseFocusClass);
        }
    }

    @HostListener('focusout', ['$event'])
    public focusout(event: Event) {
        if (this.lastEventWasMouse) {
            (
                event.target as HTMLElement
            ).classList.remove(this._mouseFocusClass);
        }
    }
}