import {
  $,
  component$,
  useOnWindow,
  useSignal,
  useStore,
} from "@builder.io/qwik";
import { io } from "socket.io-client";
const socket = io("ws://localhost:12133");

export const connectSocket = () => {
  socket.connected ? 0 : socket.connect();
};

export const disconnectSocket = () => {
  socket.disconnected ? 0 : socket.disconnect();
};

export const getSocket = () => {
  return socket;
};

export default component$((props) => {
  const {
    resource,
    resourceArgs,
    onError: OnError,
    onPending: OnPending,
    onSuccess: OnSuccess,
  } = props;

  const apiState = useSignal({
    state: "pending",
    error: null,
    data: null,
  });

  useOnWindow(
    "load",
    $(() => {
      const formattedArgs = {};

      for (let arg of Object.keys(resource.args)) {
        const argv = resource.args[arg];
        if (typeof argv === "function") {
          formattedArgs[arg] = argv(resourceArgs[arg]);
        } else {
          formattedArgs[arg] = argv;
        }
      }

      socket.emit(resource.path, formattedArgs);

      socket.on(`/response/${resource.path}`, (response) => {
        if (response.status !== 200) apiState.value.state = "error";
        const clientResponse = resource.run(response);
        clientResponse
          .then((clientResp) => {
            apiState.value.data = clientResp;
          })
          .catch((error) => {
            clientResponse.error = error;
          });
        apiState.value.state = "success";
      });
    })
  );

  return (
    <>
      {apiState.value.state === "pending" && OnPending ? (
        <OnPending />
      ) : apiState.value.state === "error" && OnError ? (
        <OnError {...apiState.value.error} />
      ) : apiState.value === "success" && OnSuccess ? (
        <OnSuccess {...apiState.value.data} />
      ) : null}
    </>
  );
});