import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
import { HelpModeService } from './help-mode.service';

@Directive({
    selector: '[iqserHelpMode]',
    exportAs: 'iqserHelpMode',
})
export class HelpModeDirective implements OnInit {
    @Input('iqserHelpMode') elementName!: string;

    constructor(
        private readonly _elementRef: ElementRef,
        private readonly _renderer: Renderer2,
        private readonly _helpModeService: HelpModeService,
    ) {}

    ngOnInit(): void {
        this._createHelperElement();
    }

    private _createHelperElement() {
        const element = this._elementRef.nativeElement as HTMLElement;

        const helperElement = this._renderer.createElement('div') as HTMLElement;
        this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
        this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);

        this._helpModeService.addElement(this.elementName, element, helperElement);
    }

    @HostListener('click') onClick(): void {
        this._helpModeService.openDocsFor(this.elementName);
    }
}