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

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

    constructor(
        private readonly _elementRef: ElementRef,
        private readonly _renderer: Renderer2,
        private readonly _helpModeService: HelpModeService,
        private readonly _router: Router,
    ) {
        this._path = this._router.url.split('/').pop() as string;
    }

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

    private _createHelperElement() {

        const element = this._elementRef.nativeElement as HTMLElement;
        const helperElementName = `${this.elementName}-${this._generateId()}`;

        const helperElement = this._renderer.createElement('a') as HTMLElement;
        this._renderer.setAttribute(helperElement, 'href', this._helpModeService.getDocsLink(this.elementName));
        this._renderer.setAttribute(helperElement, 'target', '_blank');
        this._renderer.addClass(helperElement, 'help-mode');
        this._helpModeService.addElement(helperElementName, element, helperElement);
    }

    private _generateId(): string {
        return Math.random().toString(36).substring(2, 9);
    }
}