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

import { BadgeColor, BadgePosition } from '../enums';

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

export class BadgeDirective implements AfterViewInit {
    @Input() public readonly color: BadgeColor;
    @Input('cmnBadge') public readonly data: string;
    @Input() public readonly position: BadgePosition;

    constructor(private readonly el: ElementRef) {}

    public ngAfterViewInit(): void {
        if (this.data) {
            this.el.nativeElement.classList.add('has-badge-rounded');
            this.el.nativeElement.setAttribute('data-badge', this.data);

            this.addCustomClasses();
        }
    }

    private addCustomClasses() {
        if (this.position) {
            this.el.nativeElement.classList.add(`has-badge-${ this.position }`);
        }

        if (this.color) {
            this.el.nativeElement.classList.add(`has-badge-${ this.color }`);
        }
    }
}