import React, { createContext, useContext, useEffect, useState } from "react";
import { tableReload } from "../../store/TableReloads";
import { useDispatch } from "react-redux";

import io from "socket.io-client";

let SocketIOContext = createContext({})

export default function SocketIOContextProvider({children}) {
    const dispatch = useDispatch()

    const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET); 

    // //Room State
    // const [room, setRoom] = useState("");

    // // Messages States
    // const [message, setMessage] = useState("");
    const [socketMsgReceived, setSocketMsgReceived] = useState("");

    const joinRoom = (room) => {
        if (room !== "") {
        socket.emit("join_room", room);
        }
    };

    const sendMessage = (message, room) => {
        if(message && room){
            socket.emit("send_message", { message, room });
        }
    };

    const marketUpdate = (message, room) => {
        if(message && room){
            socket.emit("marketjob_addded", { message, room });
        }
    };

    useEffect(() => {
        socket.on("receive_message", (data) => {
            // setSocketMsgReceived(data.message);
            dispatch(tableReload({type:'CHATMESSAGELIST'}))
        });
        socket.on("received_refreshmarket_jobs", (data) => {
            // setSocketMsgReceived(data.message);
            dispatch(tableReload({type:'MARKETTABLELIST'}))
        });
    }, [socket]);

    let values = {
        socket,
        sendMessage,
        joinRoom,
        setSocketMsgReceived,
        socketMsgReceived,
        marketUpdate,
        // room,
        // setRoom,
        // message,
        // setMessage,
    }

  return (
    <SocketIOContext.Provider value={values}>
        {children}
    </SocketIOContext.Provider>
  )
}


export const SocketValues = () => {
    return useContext(SocketIOContext)
}