import React, { useState, useEffect, useRef } from "react";
import { createContext } from "react";
import * as api from "../../services/api";
import { useQuery } from "react-query";
import io from "socket.io-client";

const ChatContext = createContext();

const ChatProvider = ({ children }) => {
  const [state, setState] = useState({ message: "", name: "", room: "général" });
  const [chatLogs, setChatLogs] = useState([]);
  const socketRef = useRef();

  useQuery("getUser", () => api.getUser(), {
    onSuccess: (data) => {
      setState({ ...state, name: data.data.pseudo });
    },
  });

  useEffect(() => {
    socketRef.current = io.connect("http://localhost:4000");
    return () => socketRef.current.disconnect();
  }, []);

  useEffect(() => {
    socketRef.current.on("message", ({ name, message }) => {
      setChatLogs([...chatLogs, { name, message, room: state.room }]);
    });
  }, [chatLogs, state.room]);

  useEffect(() => {
    socketRef.current.emit("room", {
      room: state.room,
    });

    return () =>
      socketRef.current.emit("leave room", {
        room: state.room,
      });
  }, [state.room]);

  const onTextChange = (e) => {
    setState({ ...state, [e.target.name]: e.target.value });
  };

  const onMessageSubmit = (e) => {
    e.preventDefault();
    const { name, message, room } = state;
    socketRef.current.emit("message", { name, message, room });
    setState({ message: "", name, room });
  };

  return (
    <ChatContext.Provider value={{ chatLogs, onTextChange, onMessageSubmit, state, setState }}>
      {children}
    </ChatContext.Provider>
  );
};
export { ChatProvider, ChatContext };