import { useRef } from "react";
import Picker from "@emoji-mart/react";
import emojiData from "@emoji-mart/data";
import { useClickOutside } from "../../hooks/useClickOutside";
import { useTheme } from "../../context/ThemeContext";

export default function ChatInputBar({
  input,
  onInputChange,
  onSend,
  onEmojiSelect,
  showEmoji,
  onToggleEmoji,
  onCloseEmoji,
  connected,
  placeholder,
}) {
  const emojiPickerRef = useRef(null);
  useClickOutside(emojiPickerRef, onCloseEmoji, showEmoji);
  const { theme } = useTheme();

  return (
      <div className="chat-input-area">
        {showEmoji && (
            <div className="chat-emoji-picker" ref={emojiPickerRef}>
              <Picker
                  data={emojiData}
                  onEmojiSelect={onEmojiSelect}
                  theme={theme}
                  previewPosition="none"
                  skinTonePosition="none"
                  searchPosition="sticky"
                  maxSearchResults={30}
                  perLine={8}
              />
            </div>
        )}
        <form onSubmit={onSend} className="chat-input-row">
          <input
              value={input}
              onChange={(e) => onInputChange(e.target.value)}
              placeholder={placeholder}
              className="chat-input"
          />
          <button
              type="button"
              className={`chat-emoji-btn${showEmoji ? " active" : ""}`}
              onClick={onToggleEmoji}
          >
            😊
          </button>
          <button type="submit" className="chat-send-btn" disabled={!connected}>
            ➤
          </button>
        </form>
      </div>
  );
}