import { isInvalid } from "@/components/TableBuilder/util/data";
import { socket } from "@/socket";
import { useEffect } from "react";

type Props = {
  list: ProjectsData;
  setList: React.Dispatch<React.SetStateAction<UsersData>>;
  fetchData: () => void;
};

export const useUsersSocket = ({ list, setList, fetchData }: Props) => {
  const onAddUser = (user: UserData) => {
    // setList((prev) => {
    //   const copy = prev === "empty" ? [] : (prev as UserData[]);

    //   return [...copy, user] as UserData[];
    // });

    fetchData();
  };

  const onDeleteUser = ({ id }: UserData) => {
    // setList((prev) => {
    //   const copy = prev === "empty" ? [] : (prev as UserData[]);

    //   const index = copy.findIndex((user) => user.id === id);

    //   if (index === -1) return copy;

    //   return [...copy.slice(0, index), ...copy.slice(index + 1)] as UserData[];
    // });

    fetchData();
  };

  useEffect(() => {
    socket.on("add-user", onAddUser);
    socket.on("delete-user", onDeleteUser);
    return () => {
      socket.off("add-user", onAddUser);
      socket.off("delete-user", onDeleteUser);
    };
  }, []);
};