import { Component, OnInit, Input, Output, HostListener, EventEmitter } from '@angular/core';
import { OnChanges } from '@angular/core/src/metadata/lifecycle_hooks';


interface Skill {
  text: string;
  selected: boolean;
  id: number;
}

@Component({
  selector: 'app-dropdownlist-skills',
  templateUrl: './dropdownlist-skills.component.html',
  styleUrls: ['./dropdownlist-skills.component.scss']
})
export class DropdownlistSkillsComponent implements OnInit, OnChanges {
  constructor() { }

  @Output() toggleBox = new EventEmitter<boolean>();
  @Input() listSkills: Skill[];
  @Input() showDropdownList?= true;
  @Input() placeholder?= '';
  toggleSkillsList: boolean;
  skillSelected: Skill[];

  @HostListener('body:click')
  closeChooseSkillsList() {
    this.toggleSkillsList = false;
    this.toggleBox.emit(this.showDropdownList);
  }

  ngOnChanges() {
    this.skillSelected = this.listSkills && this.listSkills.filter(s => s.selected) || undefined;
    if (!this.showDropdownList) {
      this.toggleSkillsList = false;
    }
  }
  ngOnInit() {
  }

  toggleChooseSkills(e) {
    e.stopPropagation();
    this.toggleSkillsList = this.toggleSkillsList ? false : true;
  }

  selectSkill(skill: Skill) {
    skill.selected = skill.selected ? false : true;
    this.skillSelected = this.listSkills.filter(s => s.selected);
  }
}
