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

import { ITooltip } from '../interfaces';

@Directive({
    selector: '[clsTooltip]',
})

export class TooltipDirective implements OnInit {
    @Input('clsTooltip') private options: ITooltip;

    constructor(
        private readonly element: ElementRef,
        private readonly renderer: Renderer2,
    ) {}

    public ngOnInit(): void {
        const color = `is-tooltip-${ this.options.color && this.options.color.split('-').pop() }`;

        this.element.nativeElement.classList
            .add(color, 'tooltip', `is-tooltip-${ this.options.position }`);

        this.renderer.setAttribute(this.element.nativeElement, 'data-tooltip', this.options.label);

        if (this.options.isMultiLine) {
            this.element.nativeElement.classList.add('is-tooltip-multiline');
        }

        if (this.options.isActive) {
            this.element.nativeElement.classList.add('is-tooltip-active');
        }
    }
}