"use client";
import SearchDate from "../SearchDate/SearchDate";
import { useEffect, useState } from "react";

import "../../(private)/AsignacionEquipo/asignacion.css"
import { envConfig } from "@/app/lib/config";
import axios from "axios";

interface equipos {
  hora_entrada: string;
  min_utilizados: number;
  hora_salida: string;
  cuenta_asociada: number;
}

function BitacoraEquipo() {
  const [equipo, setEquipo] = useState<equipos[]>([]);
  const [open, setOpen] = useState(false);
  const [loadingEquipos, setLoadingEquipos] = useState(false);
  const [equipoSeleccionado, setEquipoSeleccionado] = useState<any>(null);
  const [equipos, setEquipos] = useState<any[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      setLoadingEquipos(true);
      const response = await axios.get(`${envConfig.apiUrl}/equipo`);
      setEquipos(response.data);
      setLoadingEquipos(false);
    };

    fetchData();
  }, []);

  return (
    <>
      <label>Seleccione un equipo</label>

      <div className="groupInput">
        <div
          className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
        >
          <div
            className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.plataforma?.nombre?.toUpperCase()}`}
            onClick={() => !loadingEquipos && setOpen(!open)}
          >
            {equipoSeleccionado ? (
              <span
              >
                {equipoSeleccionado.ubicacion}{" "}
                {equipoSeleccionado.nombre_equipo}
              </span>
            ) : (
              <span className="placeholder">
                {loadingEquipos
                  ? "Cargando equipos..."
                  : "Seleccione un equipo"}
              </span>
            )}

            <span className="arrow">{open ? "▲" : "▼"}</span>
          </div>

          {open && (
            <div className="options" style={{ bottom: "auto"}}>
              {equipos.length === 0 && (
                <div className="option disabled">
                  No hay equipos disponibles
                </div>
              )}

              {equipos.map((eq) => (
                <div
                  key={eq.id_equipo}
                  className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
                  onClick={() => {
                    setEquipoSeleccionado(eq);
                    setOpen(false);
                  }}
                >
                  {eq.ubicacion} {eq.nombre_equipo}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
      <SearchDate />
      <div>
        <table>
          <thead>
            <tr>
              <th>Hora Entrada</th>
              <th>Minutos utilizados</th>
              <th>Hora salida</th>
              <th>Cuenta asociada</th>
            </tr>
          </thead>
          <tbody>
            {equipo.map((equipo, index) => (
              <tr key={index}>
                <td>{equipo.hora_entrada}</td>
                <td>{equipo.min_utilizados}</td>
                <td>{equipo.hora_salida}</td>
                <td>{equipo.cuenta_asociada}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

export default BitacoraEquipo;