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

@Component({
  selector: 'app-cards',
  templateUrl: './cards.component.html',
  styleUrls: ['./cards.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 CardsComponent implements OnInit {

  public primerColorTitulos: string = '';
  public span: any;
  public color: string = '';
  public textColor: string = '';
  public icons = [
    { icono: 'Tipo_Tarea' },
    { icono: 'registro_bitacora' },
    { icono: 'Informacion' },
    { icono: 'periodos' },
    { icono: 'administrador_de_usuarios' },
    { icono: 'Relacionar_Alumnos' },
    { icono: 'Alumno_grupo' },
    { icono: 'Relacionar_profesor' },
    { icono: 'personalizar' },
    { icono: 'Materia' },
    { icono: 'Grados_Educativos' },
    { icono: 'Niveles_Educativos' },
    { icono: 'Grupos' },
    { icono: 'MiEscuela' },
    { icono: 'usuarios' },
    { icono: 'modulos' },
    { icono: 'personalizar' }

  ];
  public cardsUser = [
    { title: 'Niveles Educativos', icono: 'Niveles_Educativos', url: 'nivelesEducativos' },
    { title: 'Grados Educativos', icono: 'Grados_Educativos', url: 'gradosEducativos' },
    { title: 'Grupos', icono: 'Grupos', url: 'grupo' },
    { title: 'Materias', icono: 'Materia', url: 'materias' },
    { title: 'Categorías de Materias', icono: 'Materia', url: 'categoriasMaterias' },

  ];
  public cardsUsuario = [
    { title: 'Gestión de Usuarios', icono: 'administrador_de_usuarios', url: 'catalogoUsuarios' },
    { title: 'Alumnos', icono: 'Relacionar_Alumnos', url: 'alumnos-padres' },
    { title: 'Profesores', icono: 'Relacionar_profesor', url: 'profesores-materias' },
  ];
  public cardsModulos = [
    { title: 'Tipos de Tareas', icono: 'Tipo_Tarea', url: 'tipoTarea' },
    { title: 'Gestión de Periodos', icono: 'Tipo_Tarea', url: 'periodos' },
  ];
  public cardsPersonalizar = [
    { title: 'Personalizar', icono: 'personalizar', url: 'personalizar' },
    {title : 'Formularios', icono:'Materia', url : 'formularios' },
  {title : 'Publicar Formulario', icono:'Materia', url : 'verFormulario' }

  ];
  public variable1: string = "";


  constructor(private _MatIconRegister: MatIconRegistry, private _DomSanitizer: DomSanitizer, private _router: Router, private _enviarInfo: EnviarInfoService) {
    this.icons.forEach(element => {
      this._MatIconRegister.addSvgIcon(element.icono, this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + element.icono + '.svg'));
    });
  }

  ngOnInit(): void {
    this._enviarInfo.currentTextColor.subscribe(textColor => {
      this.textColor = textColor;
    });
    this._enviarInfo.currentColor.subscribe(color => {
      this.color = color;
    });

    this.span = [
      { title: 'Mi Escuela', img: 'assets/img/Mi-escuela.png', categoria: 'escuela', flip: 'inactive', icono: 'MiEscuela' },
      { title: 'Usuarios', img: 'assets/img/UsuariosC.png', categoria: 'usuarios', flip: 'inactive' },
      { title: 'Módulos', img: 'assets/img/Modulos.png', categoria: 'modulos', flip: 'inactive' },
      { title: 'Personalizar', img: 'assets/img/Personalizar.png', categoria: 'personalizar', flip: 'inactive' }
    ];
  }




  comprobarModulo(cat: string) {
    // this.variable1 = this.categorias;
    this.variable1 = cat;
    let array: any[];

    switch (this.variable1) {
      case 'escuela':
        array = this.cardsUser;

        break;
      case 'usuarios':
        array = this.cardsUsuario;

        break;
      case 'modulos':
        array = this.cardsModulos;

        break;
      case 'personalizar':
        array = this.cardsPersonalizar;

        break;
      default:
        array = [];
        break;
    }
    return array;

  }

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

  toggleFlip(card: any) {
    this.span.forEach((option: any) => {
      if (option === card) {
        option.flip = (option.flip === 'inactive') ? 'active' : 'inactive';

      } else {
        option.flip = 'inactive';
      }
    });
  }

}
