import React, { useContext, useEffect, useRef } from 'react'
import "./ChatFooter.css";
import { PaperAirplaneIcon, PhotoIcon, PaperClipIcon, FaceSmileIcon } from "@heroicons/react/24/solid";
import { SocketContext } from '../../contexts/SocketProvider';

function ChatFooter({
  currentChatId,
}) {
  // console.log(currentChatId)
  const socket = useContext(SocketContext);
  const messageRef = useRef();




  const sendMessage = (message) => {

    if (message.trim() === "") return;


    const message_bundle = {
      content:message,
      receiver_id: currentChatId,
      type:"text",
    }

    if (socket) {
      socket.emit("send_message", message_bundle);
    }

    messageRef.current.value = "";

  }

  const handleEnter = (e) => {
    if (e.key == "Enter") {
      sendMessage(messageRef.current.value);
    }
  }

  return (
    <footer className='chat_footer'>
      <div className='send_options'>

        <FaceSmileIcon className='send_options_btn' />
        <PhotoIcon className='send_options_btn' />
        <PaperClipIcon className='send_options_btn' />
      </div>
      <input className="text_box" type="text" placeholder='Message' onKeyUp={handleEnter} ref={messageRef} />
      <PaperAirplaneIcon onClick={() => { sendMessage(messageRef.current.value) }} className='send_icon' />
    </footer>
  )
}

export default ChatFooter