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 { RelacionService } from '../../../Administrador/services/relacion.service';
import Swal from 'sweetalert2';

@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 users: 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 _relacionService:RelacionService){

  }

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

getAlumnos() {
    this._relacionService.getAlumnos().subscribe((data: any) => {
        this.isLoading = false;
        this.registros = data.alumnos.filter((registro: any) => registro.nombrePadres.some((padre: any) => padre.idPadre === this.userData[0]));
        for(let i = 0; i < this.registros.length; i++){
            let nombre = this.registros[i].nombreAlumno.split(' ')[0] + ' ' + this.registros[i].nombreAlumno.split(' ')[2];
            this.users.push({
                name: nombre,
                img: 'assets/img/hujos.png',
                flip: 'inactive',
                idUser: this.registros[i].idUsuario
            });
        }
        console.log(this.users);
        if (this.users.length === 0) {
            Swal.fire({
              icon: 'error',
                title: 'No cuenta con ningún alumno relacionado' ,
                text: 'Por favor, contacte a la administración del colegio para más información'
            });

            this._router.navigate(['/homePadres/main']);

        }
    });
}

  circularHijo(data: any){
    this._router.navigate(['/homePadres/circularHijo',btoa(data)]);
        console.log(data);

  }
  tareaHijo(data: any){
    this._router.navigate(['/homePadres/tareaHijo',btoa(data)]);
        console.log(data);
  }
  bitacoraHijo(data: any){
    this._router.navigate(['/homePadres/bitacoraHijo',btoa(data)]);
    console.log(data);

  }

  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';
      }
    });
  }

}
