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';
import { RelacionarProfesoresService } from '../../../Administrador/services/relacionarProfesores.service';

@Component({
  selector: 'app-cards-hijos',
  templateUrl: './card-grupos.component.html',
  styleUrl: './card-grupos.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 CardGruposComponent implements OnInit {

  public grupos: any[] = [];
  public primerColorTitulos: string = '';
  public variable1: string = "";
  private userData = JSON.parse(localStorage.getItem('userDataS') ? localStorage.getItem('userDataS') || '' : localStorage.getItem('userData') || '');
  registros: any;
  isLoading: boolean = true;
  CircularAlum: any;
  constructor(private _router: Router, private _relacionProfesorService: RelacionarProfesoresService) {

  }

  ngOnInit(): void {
    let primerColorTitulos = localStorage.getItem('primerColorTitulos') || '';
    this.primerColorTitulos = primerColorTitulos;
    this.getGrupos(this.userData[0]);
  }

  getGrupos(id: string) {
    this._relacionProfesorService.getGrupos(id).subscribe((data: any) => {
      this.isLoading = false;
      this.registros = data;

      this.registros.forEach((grupo: any) => {
        this.grupos.push({
          name: grupo.nombreGrupo,
          img: 'assets/img/hujos.png',
          flip: 'inactive',
        });

      });
    })

  }

  circularHijo(data: any) {
    this.CircularAlum = {
      idAlumno: data.idUser,
      nombreAlumno: data.name
    }
    localStorage.setItem('CA', JSON.stringify(this.CircularAlum));
    this._router.navigate(['/homePadres/circularHijo']);
  }

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

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

}
