import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Proyectos } from '../../../Models/proyectos';
import { ProyectosService } from '../../../services/proyectos/proyectos.service';
import { MostrarOcultarService } from '../../../services/mostrar-ocultar.service';
import { Compartir_idService } from '../../../services/compartir_id/compartir_id.service';
import { Usuario } from '../../../Models/usuario';
import { UsuariosService } from '../../../services/usuarios/usuarios.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { DatosEspeService } from '../../../services/APIs Externas/Datos espe/datos-espe.service';


@Component({
  selector: 'vex-list-proyecto-asigna',
  templateUrl: './list-proyecto-asigna.component.html',
  styleUrls: ['./list-proyecto-asigna.component.css']
})
export class ListProyectoAsignaComponent implements OnInit {
  usuario!: Usuario[];
  selectedTipo: string;
  proyecto: Proyectos;
  proyectos!: Proyectos[];
  enviarIdUsuario: Proyectos;
  director: string;
  displayedColumns: string[] = [
    'Nro',
    'Estado',
    'Codigo',
    'Nombre',
    'Director',
    'Campus',
    'Departamento',
    'Tipo',
    'Seleccione'
  ];
  dataSource: MatTableDataSource<Proyectos>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  filtroGeneral: string = '';

  constructor(
    private router: Router,
    private proyectosService: ProyectosService,
    private datosUsuarioService: UsuariosService,
    private mostrarOcultarService: MostrarOcultarService,
    private compartirID: Compartir_idService,
    private datosEspeService: DatosEspeService
  ) {
    this.proyecto = new Proyectos();
    this.dataSource = new MatTableDataSource<Proyectos>([]);
    this.enviarIdUsuario = new Proyectos()
  }

  ngOnInit(): void {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.obtenerRegistros();
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  obtenerRegistros() {
    this.proyectosService.obtenerParametros().subscribe(data => {
      this.proyectos = data.map(proyecto => {
        return {
          ...proyecto,
          departamento$: this.obtenerDatosDepartamento(proyecto.stvsubj_code),
          campus$: this.obtenerDatosCampus(proyecto.stvcamp_code),
          nombres$: this.obtenerDatosUsuario(proyecto.uzytusuario_id),
        };
      });
      this.dataSource.data = this.proyectos;
    });
  }

  obtenerDatosCampus(codigo: string): Observable<string> {
    return this.datosEspeService.obtenerCampus().pipe(
      map(campus => {
        const campusEncontrado = campus.find(c => c.codigo === codigo);
        return campusEncontrado ? campusEncontrado.descripcion : 'No encontrado';
      })
    );
  }

  obtenerDatosDepartamento(codigo: string): Observable<string> {
    return this.datosEspeService.obtenerDepartamentos().pipe(
      map(departamentos => {
        const departamentoEncontrado = departamentos.find(c => c.subj === codigo);
        return departamentoEncontrado ? departamentoEncontrado.descripcion : 'No encontrado';
      })
    );
  }

  obtenerDatosUsuario(id: number): Observable<string> {
    return this.datosUsuarioService.getAll().pipe(
      map(data => {
        const usuarioEncontrado = data.find(c => c.uzytusuario_id === id);
        return usuarioEncontrado ? usuarioEncontrado.uzytusuario_telefono_celular + " - "
          + usuarioEncontrado.uzytusuario_nombres + " " +
          usuarioEncontrado.uzytusuario_apellidos : 'No encontrado';
      })
    );
  }

  editar(id: number) {
    const registroSeleccionado = this.proyectos.find(
      proyectoFind => proyectoFind.uzytavproyec_id === id
    );
    localStorage.setItem('proyectoId', id.toString());
    //this.compartirID.setIdGuardad(id);
    this.mostrarOcultarService.editProyecto = registroSeleccionado;
    this.router.navigate(['main/AsinarC-proyecto/', id],
      { queryParams: { idUsuarioTipo: "1" } }
    );
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim();
    this.filtroGeneral = filterValue.trim();

    this.dataSource.filterPredicate = (data: Proyectos) => {
      const Codigo = data.uzytavproyec_codigo ? data.uzytavproyec_codigo.toLowerCase() : '';
      const Nombre = data.uzytavproyec_nombre ? data.uzytavproyec_nombre.toLowerCase() : '';


      // Filtrar por todos los campos (nombre de institución, dirección, representante y parroquia)
      return (
        Codigo.includes(this.filtroGeneral.toLowerCase()) ||
        Nombre.includes(this.filtroGeneral.toLowerCase())
      );
    };
  }

  applyFilterByEstado() {
    this.dataSource.filterPredicate = (data: Proyectos) => {
      if (this.selectedTipo === 'A') {
        return (data.uzytavcabcomca_id === null && data.uzytavconparaeva_id === null);
      } else if (this.selectedTipo === 'I') {
        return !(data.uzytavcabcomca_id === null && data.uzytavconparaeva_id === null);
      }
      return true;
    };
  }

}