import {
  Component,
  ViewEncapsulation,
  ViewChild,
  Input,
  Output,
  EventEmitter,
  ChangeDetectorRef
} from '@angular/core';
import { TreeModel, TreeComponent, ITreeOptions } from 'angular-tree-component';
// import {trigger, state, animate, transition, style} from
// '@angular/animations';
import { fuzzysearch, getBranchRequierds, validation } from './target.util';
import { environment } from '../../../environments/environment';
import { NgForm } from '@angular/forms';
import { Store } from '../../store/store';

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html',
  styleUrls: ['./target.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TargetComponent {
  imgBase = environment.imagePath;
  showOption = false;
  selectedNode = {
    name: '',
    id: ''
  };
  @Input() nodes;
  @Output() onTargetChange = new EventEmitter();
  @ViewChild(TreeComponent) private tree: TreeComponent;
  @ViewChild('targetFrm') targetFrm: NgForm;
  options: ITreeOptions = {
    animateExpand: true,
    animateSpeed: 30,
    animateAcceleration: 1.2
  };

  constructor(private changeDetector: ChangeDetectorRef, public store: Store) {}

  filterFn(value, treeModel: TreeModel) {
    treeModel.filterNodes(node => fuzzysearch(value, node.data.name));
  }

  inputChange() {
    this.onTargetChange.emit(this.selectedNode.id);
  }

  updateMode(action) {
    this.selectedNode = {
      id: action.target,
      name: ''
    };
    this.changeDetector.detectChanges();
  }

  onEvent(event) {
    if (event.eventName === 'activate') {
      if (event.node.data.children === null) {
        this.selectedNode = event.node.data;
        this.onTargetChange.emit(this.selectedNode);
        this.showOption = false;
      }
    }
  }
}