import { AfterViewChecked, Component, ElementRef, Input, OnInit } from '@angular/core';
import { select } from 'd3';

import { Node } from '@creedinteractive/onguard-models';
import { D3Service } from '../../../../services/d3.service';

@Component({
    selector: '[node]',
    templateUrl: './node.component.html',
    styleUrls: ['./node.component.scss'],
})
export class NodeComponent implements OnInit, AfterViewChecked {
    @Input() node: Node;
    differ: boolean;

    constructor(private _element: ElementRef, private d3Service: D3Service) {}

    ngOnInit(): void {
        this.differ = this.node.selected;
    }

    ngAfterViewChecked(): void {
        if (this.node.selected !== this.differ) {
            if (this.node.selected) {
                this.d3Service.wrapAll(
                    select(this._element.nativeElement).selectAll('.wrapper'),
                    this.node.rContent,
                    6.5,
                );
            }
            this.differ = this.node.selected;
        }
    }
}