import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { environment } from '../../../../../../environments/environment.dev';

@Component({
  selector: 'app-lp-select-skills',
  templateUrl: './lp-select-skills.component.html',
  styleUrls: ['./lp-select-skills.component.scss']
})
export class LpSelectSkillsComponent implements OnInit {

  @Input() mSkill:any;
  @Input() color:any;
  colors = ["#009587","#01BCD5", "#663AB7","#E6A9E6", "#3F51B5", "#F8A9CA", "#6FDCDE", "#F2D2CD", "#F2CCDB", "#BFE2F5", "#D8D0F7", "#6FDCDE", "#EC8ECC","#E6A9E6", "#3F51B5", "#F8A9CA", "#6FDCDE", "#F2D2CD", "#F2CCDB", "#BFE2F5", "#D8D0F7"];
  didHover: boolean = false;
  selectedTheSkill: boolean = false;
  @Input() keyClearMethod: boolean;
  @Output() selectedSkills = new EventEmitter();
  imageUrl: string = environment.imageUrl;
  constructor() {
    if(this.keyClearMethod){
      this.mSkill.isSelected == false;
      this.didHover = false;
    }
    
    if(this.mSkill){
      if(this.mSkill.isSelected == false){
        this.didHover = false;
      }
    }
    
  }

  ngOnInit() {
    if(this.mSkill){
      // console.log("mSkill", this.mSkill);
      if(this.mSkill.isSelected == false){
        this.didHover = false;
      }
    }
  }

  Initials(xitem: string) {
    if (xitem) {
      return xitem.replace(/\W*(\w)\w*/g, '$1').toUpperCase();
    }
  }

  randomColor(){
    return  this.colors[Math.floor(Math.random() * (this.colors.length-1)) + 0];
  }

  hoverActive(mSkillCard: HTMLElement, value){
    mSkillCard.classList.toggle('mSkill-card-hover-active');
    this.didHover = value;
  }

  selectTheCard(mSkill){
    this.selectedTheSkill = true;
    mSkill.isSelected = true;
    this.selectedSkills.emit(mSkill);
  }
}
