import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { environment } from '../../../../environments/environment.dev';
@Component({
  selector: 'app-cat-cards',
  templateUrl: './cat-cards.component.html',
  styleUrls: ['./cat-cards.component.scss']
})
export class CatCardsComponent implements OnInit {

  @Input() cat: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;
  selectedTheCat: boolean = false;
  imageUrl: string = environment.imageUrl;
  
  @Output() selectedCats = new EventEmitter();

  constructor() {
    
    if(this.cat){
      if(this.cat.isSelected == false){
        this.didHover = false;
      }
    }
  }

  ngOnInit() {
    if(this.cat){
      if(this.cat.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(catCard: HTMLElement, value){
    catCard.classList.toggle('cat-card-hover-active');
    this.didHover = value;
  }

  selectTheCat(cat){
    this.selectedTheCat = true;
    cat.isSelected = true;
    this.selectedCats.emit(cat);
  }
}
