import { Component, OnInit, Input, HostListener, ElementRef } from '@angular/core';
import { basicAnimations } from '../../../shared/animations/animations';

@Component({
  selector: 'app-node-config-item',
  template: `
    <div class="title" (click)="show = !show">{{config.group}}</div>
    <app-node-config-tab *ngIf="show" [config]="config.content"></app-node-config-tab>
  `,
  styleUrls: ['./node-config-item.component.scss'],
  animations: basicAnimations
})
export class NodeConfigItemComponent {
  @Input() config: {};
  show = false;

  @HostListener('document:click', ['$event.target'])
  onDocumentClick(target) {
    if (!this.el.nativeElement.contains(target)) {
      this.show = false;
    }
  }

  constructor(private el: ElementRef) {}
}