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

const ChatSidebar = ({ isOpen, onClose }) => {

  const [messages, setMessages] = useState([
    { id: 1, text: 'Olá! Como podemos ajudar você hoje?', sender: 'support' }
  ]);
  const [inputValue, setInputValue] = useState('');
  const messagesEndRef = useRef(null);
  const sidebarClassName = `chat-sidebar ${isOpen ? 'open' : ''}`;
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSendMessage = () => {
    if (inputValue.trim() === '') return;
    const newMessage = {
      id: messages.length + 1,
      text: inputValue,
      sender: 'user'
    };
    setMessages(currentMessages => [...currentMessages, newMessage]);
    setInputValue('');
    setTimeout(() => {
      const supportReply = {
        id: messages.length + 2,
        text: 'Obrigado por sua mensagem. Um de nossos atendentes responderá em breve.',
        sender: 'support'
      };
      setMessages(currentMessages => [...currentMessages, supportReply]);
    }, 1000);
  };
  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      handleSendMessage();
    }
  };

  return (
    <div className={sidebarClassName}>
      <div className="chat-header">
        <h3>Suporte Online</h3>
        <button onClick={onClose} className="chat-close-button">X</button>
      </div>

      <div className="chat-messages">
        {/* Mapeia a lista de mensagens e cria um balão para cada uma */}
        {messages.map(message => (
          <div 
            key={message.id} 
            className={`message ${message.sender === 'user' ? 'sent' : 'received'}`}
          >
            {message.text}
          </div>
        ))}
        {/* Elemento invisível no final para o scroll automático */}
        <div ref={messagesEndRef} />
      </div>

      <div className="chat-input-area">
        <input 
          type="text" 
          placeholder="Digite sua mensagem..." 
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={handleKeyPress}
        />
        <button onClick={handleSendMessage}>Enviar</button>
      </div>
    </div>
  );
};

export default ChatSidebar;