"use client";
import { envConfig } from "@/app/lib/config";
import axios from "axios";
import { useEffect, useState } from "react";

interface Equipos {
  id_equipo: number;
  id_plataforma: number;
  id_area_ubicacion: number;
  nombre_equipo: string;
  ubicacion: string;
  activo: boolean;
  ip: string;
  areaUbicacion:{area:string}
  plataforma:{nombre:string}
}


interface Props {
  onSearch: (id: number) => void;
}

export default function SelectorEquipo({ onSearch }: Props) {
  const [sala, setSala] = useState<Equipos[]>();
  const [selected, setSelected] = useState<number>();

  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelected(Number(e.target.value));
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!selected) return;
    onSearch(selected);
  };

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

      setSala(response.data);
    };

    fetchData();
  }, []);

  return (
    <form className="form-container" onSubmit={handleSubmit}>
      <select value={selected} onChange={handleChangeEquipo}>
        <option value="">-- Selecciona una equipo --</option>
        {sala &&
          sala.map((eq) => (
          <option key={eq.id_equipo} value={eq.id_equipo}>
            {eq.ubicacion } {eq.nombre_equipo} {eq.plataforma.nombre} {eq.areaUbicacion.area}
          </option>
          ))}
      </select>
    </form>
  );
}
