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

@Component({
  selector: 'app-configuracion',
  templateUrl: './configuracion.component.html',
  styleUrl: './configuracion.component.css'
})

export class ConfiguracionComponent {
  public color: string = '';
  public textColor: string = '';
  public variable1: any = '';
  public array: any;
  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: 'Administracion 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' },
  ];

  public cardsPersonalizar = [
    { title: 'Personalizar', icono: 'personalizar', url: 'personalizar' },
  ];

  public span = [
    { title: 'Mi Escuela', img: 'assets/img/Mi-escuela.png', categoria: 'escuela' },
    { title: 'Usuarios', img: 'assets/img/UsuariosC.png', categoria: 'usuarios' },
    { title: 'Módulos', img: 'assets/img/Modulos.png', categoria: 'modulos', url: 'tipoTarea' },
    { title: 'Personalizar', img: 'assets/img/Personalizar.png', categoria: 'personalizar' }
  ]

  isFlipped: boolean = false;

  //voltea las cards
  toggleFlip() {
    this.isFlipped = !this.isFlipped;
  }

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

  ];
  widowWidth: number;


  public primerColorTitulos: string = ''

  public route: string = '';


  ngOnInit(): void {

    this.route = this._router.url;
    // let primerColorTitulos = localStorage.getItem('primerColorTitulos') || ''
    // this.primerColorTitulos = primerColorTitulos;

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

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

    this.widowWidth = window.innerWidth;

  }

  ScreenSize() {
    this.widowWidth = window.innerWidth;
  }

}



