import { Data } from '@angular/router';
import { Directive, ElementRef, Inject, Input, OnInit } from '@angular/core';

import { PARTICLE_BACKGROUND } from '../../constants';

declare const particlesJS: any;

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

export class ParticleBackgroundDirective implements OnInit {
    @Input('creParticleBackground') public readonly config: any;

    private elementId: string;

    constructor(
        private readonly elementRef: ElementRef,
        @Inject('Math') private readonly math: Data,
    ) {
    }

    public ngOnInit(): void {
        this.elementId = `cre${ this.math.random() }`;
        this.elementRef.nativeElement.setAttribute('id', this.elementId);

        particlesJS(this.elementId, PARTICLE_BACKGROUND);
    }
}