import { Component, OnInit } from '@angular/core';
import { EnviarInfoService } from '../../services/enviar-info.service';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { UsersService } from '../../services/users.service';
import { Router } from '@angular/router';
import { map, Observable, startWith } from 'rxjs';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-seguimiento',
  templateUrl: './seguimiento.component.html',
  styleUrls: ['./seguimiento.component.css']
})
export class SeguimientoComponent implements OnInit {
  public color: string = '';
  public textColor: string = '';
  public form!: FormGroup;
  public rol = [{ id: 'AL', name: 'Alumno' }, { id: 'PR', name: 'Profesor' }, { id: 'PF', name: 'Padre de Familia' }];
  public usuarios: any = [];
  public nombres: any = [];
  public data: any;
  myControl = new FormControl('');
  filteredOptions!: Observable<string[]>;
  carga: boolean = true;
  screenSize: number;
  constructor(
    private _enviarInfo: EnviarInfoService,
    private fb: FormBuilder,
    private userService: UsersService,
    private router: Router,
  ) {
    this.onResize();
    this.getUsuarios();
    this.screenSize = window.innerWidth;
  }

  onResize() {
    this.screenSize = window.innerWidth;
  }

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

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

  cargarFormulario() {
    this.form = this.fb.group({
      rol: [''],
      nombre: [''],
    });
  }

  getUsuarios() {
    return this.userService.getAllUsers().subscribe((response: any) => {
      this.data = response;
      this.carga = false;
    });
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.nombres
      .map((option: any) => option.usuario[2]).filter((nombre: string) => nombre.toLowerCase().includes(filterValue));
  }

  onTipoUsuario(event: any) {
    this.usuarios = [];
    this.nombres = [];

    this.usuarios = this.data.filter((user: any) => user.tipoUsuario === event.id);
    for (let i = 0; i < this.usuarios.length; i++) {
      this.nombres.push({
        usuario: [
          this.usuarios[i].idUsuario,
          this.usuarios[i].tipoUsuario,
          `${this.usuarios[i].nombreUsuario} (${this.usuarios[i].idUsuario})`,
        ]
      });
    }
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value || '')),
    );
  }

  setNombre(nombre: any) {
    let data = this.nombres.find((element: any) => element.usuario[2] === nombre);
    this.form.get('nombre')?.setValue(data);
  }

  saveGrupo() {

    if (localStorage.getItem('userDataS')) {
      Swal.fire({
        title: 'Ya estas visualizando un usuario',
        text: 'Por favor cierra la visualización actual antes de iniciar una nueva.',
        icon: 'warning',
        confirmButtonText: 'Aceptar'
      })

    } else {
      let usuario = [this.form.value.nombre.usuario[0], this.form.value.rol.id, this.form.value.nombre.usuario[2].split(' ')[0]];
      localStorage.setItem('userDataS', JSON.stringify(usuario));
      switch (this.form.value.rol.id) {
        case 'AL':
          const urlAL = this.router.serializeUrl(
            this.router.createUrlTree(['homeAlumno/main'])
          );
          window.open('/#' + urlAL, '_blank');
          window.open('/#' + urlAL, '_blank');
          break;
        case 'PF':
          const urlPF = this.router.serializeUrl(
            this.router.createUrlTree(['homePadres/main'])
          );
          window.open('/#' + urlPF, '_blank');

          break;
        case 'PR':
          const urlPR = this.router.serializeUrl(
            this.router.createUrlTree(['homeProfe/main'])
          );
          window.open('/#' + urlPR, '_blank');

          break;
      }
      this.myControl.setValue('');
      this.form.reset();
      this.nombres = [];
      this.filteredOptions = this.myControl.valueChanges.pipe(
        startWith(''),
        map(value => this._filter(value || '')),
      );
    }


  }
}
