import React from "react";
import ReactDOM from "react-dom/client";
import { SocketProvider } from "react-simple-socket.io";
import App from "./app";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <SocketProvider
    socketIoConfig={{
      uri: "<Socket URL Here>",
      options: {
        autoConnect: false
        /* Additional Socket.IO options */
      },
      // Optional globalEventHandlers map
      globalEventHandlers: {
        connect: () => {
        },
        "some-global-event": () => {
          /* Do something globally */
        }
      }
    }}>
    <App />
  </SocketProvider>
);

import React, { useEffect } from "react";
import {
  ChatMessage,
  ChatPanel,
  ChatUser,
  ChatMessageList,
  ChatInput
} from "ficticious-chat-library";
import { useSocketContext } from "react-simple-socket.io";
/* Other imports */

const ChatWidget = (): JSX.Element => {
  const { connect, disconnect, subscribe, emit } = useSocketContext();
  const [messages, setMessages] = useState<ChatMessage>([]);
  const [userTyping, setUserTyping] = useState<ChatUser>();

  const sendMessage = (text: string) => {
    emit("new-message", { msg: text });
  };

  useEffect(() => {
    // Subscribe to socket events when component mounts
    const onNewMessage = subscribe("new-message", data => {
      setMessages(list => [...list, new ChatMessage(data)]);
    });

    const onRemoteUserTyping = subscribe("start-typing", data => {
      setUserTyping(new ChatUser(data));
    });

    const onRemoteUserStopTyping = subscribe("stop-typing", data => {
      setUserTyping(undefined);
    });

    // Connect if Socket.IO autoConnect = false, manually connect
    connect();

    return () => {
      // Unsubscribe from socket events during unmount
      onNewMessage.unsubscribe();
      onRemoteUserTyping.unsubscribe();
      onRemoteUserStopTyping.unsubscribe();

      // Disconnect on unmount
      disconnect();
    };
  }, []);

  return (
    <ChatPanel>
      <ChatMessageList messages={messages} />

      {chatUser && <p>{chatUser.name} is typing</p>}

      <ChatInput onSend={sendMessage} />
    </ChatPanel>
  );
};

export default ChatWidget;