n3wt-school/Front-End/src/app/[locale]/parents/messagerie/page.js

'use client'
import React, { useState, useRef, useEffect } from 'react';
import { SendHorizontal } from 'lucide-react';
import Image from 'next/image';
import { getGravatarUrl } from '@/utils/gravatar';

const contacts = [
  { id: 1, name: 'Facturation', profilePic: getGravatarUrl('facturation@n3wtschool.com') },
  { id: 2, name: 'Enseignant 1', profilePic: getGravatarUrl('enseignant@n3wtschool.com')  },
  { id: 3, name: 'Contact', profilePic: getGravatarUrl('contact@n3wtschool.com')  },
];

export default function MessageriePage() {
  const [selectedContact, setSelectedContact] = useState(null);
  const [messages, setMessages] = useState({});
  const [newMessage, setNewMessage] = useState('');
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

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

  const handleSendMessage = () => {
    if (newMessage.trim() && selectedContact) {
      const contactMessages = messages[selectedContact.id] || [];
      setMessages({
        ...messages,
        [selectedContact.id]: [...contactMessages, { id: contactMessages.length + 1, text: newMessage, date: new Date() }],
      });
      setNewMessage('');
      simulateContactResponse(selectedContact.id);
    }
  };

  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      handleSendMessage();
    }
  };

  const simulateContactResponse = (contactId) => {
    setTimeout(() => {
      setMessages((prevMessages) => {
        const contactMessages = prevMessages[contactId] || [];
        return {
          ...prevMessages,
          [contactId]: [...contactMessages, { id: contactMessages.length + 2, text: 'Réponse automatique', isResponse: true, date: new Date() }],
        };
      });
    }, 2000);
  };

  return (
    <div className="flex" style={{ height: 'calc(100vh - 128px )' }}> {/* Utilisation de calc pour soustraire la hauteur de l'entête */}
      <div className="w-1/4 border-r border-gray-200 p-4 overflow-y-auto h-full ">
        {contacts.map((contact) => (
          <div
            key={contact.id}
            className={`p-2 cursor-pointer ${selectedContact?.id === contact.id ? 'bg-gray-200' : ''}`}
            onClick={() => setSelectedContact(contact)}
          >
            <Image src={contact.profilePic} alt={`${contact.name}'s profile`} className="w-8 h-8 rounded-full inline-block mr-2" width={150} height={150}/>
            {contact.name}
          </div>
        ))}
      </div>
      <div className="flex-1 flex flex-col h-full">
        <div className="flex-1 overflow-y-auto p-4 h-full">
          {selectedContact && (messages[selectedContact.id] || []).map((message) => (
            <div
              key={message.id}
              className={`mb-2 p-2 rounded max-w-xs ${message.isResponse ? 'bg-gray-200 justify-self-end' : 'bg-emerald-200 justify-self-start'}`}
              style={{ borderRadius: message.isResponse ? '20px 20px 0 20px' : '20px 20px 20px 0', minWidth: '25%' }}
            >
              <div className="flex items-center mb-1">
                <img src={selectedContact.profilePic} alt={`${selectedContact.name}'s profile`} className="w-8 h-8 rounded-full inline-block mr-2" width={150} height={150} />
                <span className="text-xs text-gray-600">{selectedContact.name}</span>
                <span className="text-xs text-gray-400 ml-2">{new Date(message.date).toLocaleTimeString()}</span>
              </div>
              {message.text}
            </div>
          ))}
          <div ref={messagesEndRef} />
        </div>
        <div className="p-4 border-t border-gray-200 flex">
          <input
            type="text"
            value={newMessage}
            onChange={(e) => setNewMessage(e.target.value)}
            className="w-full p-2 border border-gray-300 rounded"
            placeholder="Écrire un message..."
            onKeyDown={handleKeyPress}
          />
          <button
            onClick={handleSendMessage}
            className="p-2 bg-emerald-500 text-white rounded mr-2"
          >
            <SendHorizontal />
          </button>
        </div>
      </div>
    </div>
  );
}