import React, { useState, useRef, useEffect } from 'react';
import './style.css';

const Chat = () => {
  const [textAreaHeight, setTextAreaHeight] = useState('auto');
  const [overflow, setOverflow] = useState(false);
  const textareaRef = useRef(null);

  const handleInput = (e) => {
    const textarea = textareaRef.current;
    textarea.style.height = 'auto';
    const newHeight = textarea.scrollHeight;

    if (newHeight > 100) {
      textarea.style.height = '100px';
      setOverflow(true);
    } else {
      textarea.style.height = `${newHeight}px`;
      setOverflow(false);
    }
  };

  useEffect(() => {
    const textarea = textareaRef.current;
    textarea.addEventListener('input', handleInput);

    return () => {
      textarea.removeEventListener('input', handleInput);
    };
  }, []);

  return (
    <div className="chat-container">
      <div className="input-wrapper">
        <textarea
          ref={textareaRef}
          className={`chat-textarea ${overflow ? 'overflow' : ''}`}
          placeholder="Type a message..."
          style={{ height: textAreaHeight }}
        />
        {/* Add send and audio icons */}
        <div className="icon-container">
          {/* Audio recording icon */}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="currentColor"
          >
            <path d="M12 14a3.998 3.998 0 0 0 4-4V6a4 4 0 0 0-8 0v4a3.998 3.998 0 0 0 4 4zm7-4a1 1 0 1 0-2 0 5 5 0 0 1-10 0 1 1 0 1 0-2 0 7.002 7.002 0 0 0 6 6.92V20h-3a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-3v-3.08A7.002 7.002 0 0 0 19 10z" />
          </svg>

          {/* Send message icon */}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="currentColor"
          >
            <path d="M21.426 2.574a1 1 0 0 0-1.059-.219l-17 7A1 1 0 0 0 3.5 11.5l7.223 2.89 2.89 7.223a1 1 0 0 0 1.15.615 1 1 0 0 0 .71-.698l7-17a1 1 0 0 0-.047-.959zM11.074 13.8 6.057 11.943 18.057 6l-6.825 6.825a.999.999 0 0 0-.158.975z" />
          </svg>
        </div>
      </div>
    </div>
  );
};

export default Chat;