// Chat.js
import React, { useState, useEffect } from 'react';

const Chat = () => {
// Стан для збереження повідомлень користувачів
const [messages, setMessages] = useState([]);
// Стан для введення нового повідомлення користувача
const [newMessage, setNewMessage] = useState('');

// Масив із зазначеними заздалегідь повідомленнями
const predefinedMessages = [
'Hello!',
'How are you?',
'Nice to meet you.',
// Додайте інші фрази
];

// Функція, яка встановлює нове повідомлення після кліку на попередньо визначене повідомлення
const handlePredefinedMessageClick = (message) => {
setNewMessage(message);
};

// Ефект, який завантажує повідомлення з локального сховища при завантаженні компонента
useEffect(() => {
const storedMessages = JSON.parse(localStorage.getItem('chatMessages')) || [];
setMessages(storedMessages);
}, []);

// Ефект, який зберігає повідомлення в локальному сховищі при їх зміні
useEffect(() => {
localStorage.setItem('chatMessages', JSON.stringify(messages));
}, [messages]);

// Функція для зміни стану нового повідомлення на основі введеного тексту
const handleInputChange = (e) => {
setNewMessage(e.target.value);
};

// Функція для відправлення повідомлення
const handleSendMessage = () => {
if (newMessage.trim() !== '') {
// Додає нове повідомлення до списку повідомлень та очищує поле вводу
setMessages([...messages, newMessage]);
setNewMessage('');
}
};

return (
<div className="chat-container">
{/* Відображення повідомлень користувачів */}
<div className="messages-container">
{messages.map((message, index) => (
<div key={index} className="message">
{message}
</div>
))}
</div>

{/* Відображення кнопок для попередньо визначених повідомлень */}
<div className="predefined-messages">
{predefinedMessages.map((message, index) => (
<button key={index} onClick={() => handlePredefinedMessageClick(message)}>
{message}
</button>
))}
</div>

{/* Інтерфейс для введення нового повідомлення */}
<div className="input-container">
<input
type="text"
value={newMessage}
onChange={handleInputChange}
placeholder="Type a message..."
className="message-input"
/>
<button onClick={handleSendMessage} className="send-button">
Send
</button>
</div>
</div>
);
};

export default Chat;