import React from 'react';

import { useChat } from '../../providers/chat-provider';
import { useSound } from '../../providers/sound-provider';
import '../../styles/chat.css';

export function ChatInput() {
  const [message, setMessage] = React.useState('');
  const { sendActivity } = useChat();
  const { playSound } = useSound();

  const handleSend = () => {
    if (!message.trim()) return;
    playSound('send');
    sendActivity({
      type: 'message',
      text: message.trim(),
    });
    setMessage('');
  };


  return (
    <>
      <div className="input-container">
        <button className="icon-button" onClick={() => playSound('click')}>
          <svg className="icon" viewBox="0 0 24 24">
            <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
          </svg>
        </button>
        <button className="icon-button">
          <svg className="icon" viewBox="0 0 24 24">
            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
          </svg>
        </button>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          className="chat-input"
          placeholder="Type a message..."
        />
        {message.trim().length > 0 ? (
          <button className="send-button" onClick={handleSend}>
            <svg className="icon" viewBox="0 0 24 24">
              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
            </svg>
          </button>
        ) : (
          <button className="icon-button" onClick={() => playSound('click')}>
            <svg className="icon" viewBox="0 0 24 24">
              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
              <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4" />
            </svg>
          </button>
        )}
      </div>
      {/* <EmojiPicker
        visible={showEmoji}
        onClose={() => {
          playSound('click');
          setShowEmoji(false);
        }}
        onEmojiSelect={handleEmojiSelect}
      /> */}
    </>
  );
}
