import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { Router } from '@angular/router';
import 'animate.css';

@Component({
  selector: 'app-cards-hijos',
  templateUrl: './cards-hijos.component.html',
  styleUrl: './cards-hijos.component.css',
  animations: [
    trigger('flipState', [
      state('active', style({
        transform: 'rotateY(-179deg)'
      })),
      state('inactive', style({
        transform: 'rotateY(0)'
      })),
      transition('active => inactive', animate('500ms ease-out')),
      transition('inactive => active', animate('500ms ease-in'))
    ])
  ]
})
export class CardsHijosComponent implements OnInit{

  public primerColorTitulos: string = '';
  public users: any;
  public variable1: string = "";

  
  constructor(private  _router: Router){
    
  }

  ngOnInit(): void {
    let primerColorTitulos = localStorage.getItem('primerColorTitulos') || '';
    this.primerColorTitulos = primerColorTitulos;

    this.users = [
      { name: 'Alexis Hernández ', img: 'assets/img/hujos.png', flip: 'inactive'},
      { name: 'Juanito Hernández ', img: 'assets/img/hujos.png', flip: 'inactive'},
      // { name: 'Hugo Hernández ', img: 'assets/img/hujos.png', flip: 'inactive'},
      // { name: 'Pedro Hernández ', img: 'assets/img/hujos.png', flip: 'inactive'},
    ];
  }

  navigate(id: string) {
    this._router.navigate([`/homeAdmin/${id}`]);
    console.log(`/homeAdmin/${id}`);
  }

  //voltear la card de hijos
  toggleFlip(card: any) {
    this.users.forEach((option: any) => {
      if (option === card) {
        option.flip = (option.flip === 'inactive') ? 'active' : 'inactive';
      } else {
        option.flip = 'inactive';
      }
    });
  }

}
