"use client";
import { envConfig } from "@/app/lib/config";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import axios from "axios";

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: (ubicacion: string) => void;
}

export default function SelectorEquipo({ onSearch }: Props) {
  const [sala, setSala] = useState<Equipos[]>();
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();

  const paramSala = Number(searchParams.get("equipo")) || 0;
  const [selected, setSelected] = useState<number>(paramSala);

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

    setSelected(numberValue);

    if (numberValue === 0) {
      onSearch('');
    } else {
      onSearch(value);
    }

    const params = new URLSearchParams(searchParams.toString());

    if (numberValue === 0) {
      params.delete("equipo");
    } else {
      params.set("equipo", value);
    }

    router.push(`${pathname}?${params.toString()}`);
  };

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

      setSala(response.data);
    };

    fetchData();
  }, []);

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