// src/chat/components/MessageInput.tsx
import React, { useState } from "react";

interface MessageInputProps {
  activeChannelId: bigint | null;
  activeThreadId: bigint | null;
  isFullyAuthenticated: boolean;
  sendMessageReducer: (args: any) => void;
}

function MessageInput({
  activeChannelId,
  activeThreadId,
  isFullyAuthenticated,
  sendMessageReducer,
}: MessageInputProps) {
  const [messageText, setMessageText] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!messageText.trim() || !activeChannelId) return;

    // Call the sendMessage reducer
    sendMessageReducer({
      text: messageText,
      channelId: activeChannelId,
      threadId: activeThreadId,
    });
    setMessageText("");
  };

  return (
    <div className="chat-input-container">
      <form className="chat-input" onSubmit={handleSubmit}>
        <input
          placeholder={
            isFullyAuthenticated
              ? `Message ${activeThreadId ? "in thread..." : "#channel"}`
              : "Log in to chat"
          }
          disabled={!isFullyAuthenticated || !activeChannelId}
          value={messageText}
          onChange={(e) => setMessageText(e.target.value)}
        />
      </form>
    </div>
  );
}

export default MessageInput;