import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { NavigationEnd, Router } from '@angular/router';
import { AuthService } from '../../auth/services/auth.service';
import { ActividadUser } from '../../modules/Administrador/interfaces/ActividadUser.interface';
import { ActividadService } from '../../modules/Administrador/services/actividad.service';
import { Location } from '@angular/common';


@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrl: './sidebar.component.css'
})
export class SidebarComponent {
  @Output() public panelOpenState = new EventEmitter();
  @Input() color: any;
  @Input() textColor: any;
  // public panelOpenState: boolean = false;
  public abierto: boolean = false;
  public sidebar: boolean = false;
  public primerColorTitulos: string = '';
  public optionsSidebar: any;
  public route: string = '';
  public currentDate: string = new Date().toLocaleString();
  public dispositivo: string = '';
  public actividad?: any;
  public publicIP: string = '';
  public localIP: string = '';

  constructor(private iconRegistry: MatIconRegistry,
    sanitizer: DomSanitizer,
    private _router: Router,
    private authService: AuthService,
    private actividadService: ActividadService,
    private location: Location
  ) {
    this.iconRegistry.addSvgIcon('contacto', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/contacto.svg'));
    this.route = this._router.url;
    // console.log(this.route);
    this.getLocalIP();
    this.getPublicIPAddress();
    var userAgent = navigator.userAgent;
    // console.log(userAgent);
    if (/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/.test(userAgent)) {
      this.dispositivo = 'CELULAR';
    } else {
      this.dispositivo = 'PC';
    }

  }

  public optionsAdmin = [
    { icon: "widgets", text: "Principal", url: "main" },
    { icon: "account_circle", text: "Mi cuenta", url: "main" },
    { icon: "school", text: "Mis cursos", url: "main" },
    {
      icon: "tune",
      text: "Administración Escolar",
      url: null,
      suboptions: [
        { icon: "description", text: "Publicar circulares", url: "circulares" },
        { icon: "note_alt", text: "Consulta de Registro Académico / Administrativo", url: "circulares" },
        
      ]
    },
    { icon: "settings", text: "Configuración Escolar", url: "configuracion" },
  ];


  public optionsPadres = [
    { icon: "widgets", text: "Principal", url: "main" },
    { icon: "account_circle", text: "Mi cuenta", url: "main" },
    { icon: "calendar_month", text: "Calendario", url: "main" },
    { icon: "tune", text: "Registro del Alumno", url: "registroAlumno" },
  ]

  ngOnInit() {
    let primerColorTitulos = localStorage.getItem('primerColorTitulos') || ''
    this.primerColorTitulos = primerColorTitulos;
    this._router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.route = event.url;
      }
    });
    this.checkUrl();
  }

  getLocalIP() {
    this.actividadService.getIP().subscribe((response: any) => {
      this.localIP = response.local_ip;

    })
  }

  getPublicIPAddress() {
    this.actividadService.getPublicIPAddress().subscribe(
      (ip: string) => {
        this.publicIP = ip;
      }
    );
  }

  //opciones de la sidebar dependiendo el perfil
  checkUrl() {
    let array: any = []
    switch (this.route.split('/')[1]) {
      case "homeAdmin":
        this.optionsSidebar = this.optionsAdmin
        break;
      case "homePadres":
        this.optionsSidebar = this.optionsPadres
        break;
      default:
        this.optionsSidebar = []
        break;
    }
    return this.optionsSidebar;
  }

  //redirección de cada opcion de la sidebar
  navigate(id: string | null) {
    const baseRoute = this.route.split('/')[1];

    if (!id) {
      return console.log("No se proporcionó id");
    }

    switch (baseRoute) {
      case "homeAdmin":
        return this._router.navigate([`/homeAdmin/${id}`]);
      case "homePadres":
        return this._router.navigate([`/homePadres/${id}`]);
      default:
        return console.log("Ruta no encontrada");
    }
  }



  getTime() {
    const fechaHoraEntrada = this.currentDate.split(',');
    const horaEntrada = fechaHoraEntrada[1].trim(); // Hora de entrada

    const fechaHoraSalida = new Date().toLocaleString().split(',');
    const horaSalida = fechaHoraSalida[1].trim(); // Hora de salida

    // Convertir horas de entrada y salida a objetos Date
    const dateHoraEntrada = new Date('2000-01-01T' + horaEntrada + 'Z');
    const dateHoraSalida = new Date('2000-01-01T' + horaSalida + 'Z');

    // Calcular la diferencia en milisegundos
    const diferenciaMs = dateHoraSalida.getTime() - dateHoraEntrada.getTime();

    // Convertir la diferencia a horas y minutos
    const horas = Math.floor(diferenciaMs / (1000 * 60 * 60));
    const minutos = Math.floor((diferenciaMs % (1000 * 60 * 60)) / (1000 * 60));

    // Crear objeto ActividadUser con tiempo calculado
    this.actividad = {
      nombre: 'Juan',
      rol: 'Administrador',
      fechaEntrada: fechaHoraEntrada[0],
      horaEntrada: horaEntrada,
      fechaSalida: fechaHoraSalida[0],
      horaSalida: horaSalida,
      horas: horas,
      minutos: minutos,
      dispositivo: this.dispositivo,
      ipPublica: this.publicIP,
      ipLocal: this.localIP,
    };

    console.log(this.actividad);
    return this.actividadService.storeActivity(this.actividad).subscribe();
  }

  //abrir info de la página
  toggleCard() {
    this.abierto = !this.abierto;
  }

  //cerrar la info
  close() {
    this.abierto = false;
  }

  toggle() {
    // this.panelOpenState = !this.panelOpenState;
    // let value = this.panelOpenState.toString();
    // sessionStorage.setItem('statusSidebar', value)
    this.sidebar = !this.sidebar
    this.panelOpenState.emit(this.sidebar);
  }

  logout() {
    this.authService.logout();

  }



  goBack() {
    this.location.back();
  }


}
