export default function ChatsContainer({ userId }) {
	const dispatch = useDispatch();
	const { users, status, error, currentPage, totalPages } = useSelector(state => state.usersPag);
	const hasLoaded = useRef(false);
	const currentUser = useSelector(state => state.auth.user); // Получаем текущего пользователя
	const {bearerToken} = useSelector(state => state.auth)
	// Состояния диалогов получаемые через dialogueSlice
	const dialoguesMessagesStatus = useSelector(state => state.dialogues.status);
	const dialogueState = useSelector(state => state.dialogues.data)
	const [selectedDialogue, setSelectedDialogue] = useState(null);
	//console.log('Selected Dialogue:', JSON.stringify(selectedDialogue, null, 2))
	const [newMessage, setNewMessage] = useState('');

	// Загружаем пользователей при монтировании
	useEffect(() => {
		if (!hasLoaded.current) {
			dispatch({ type: "usersPag/resetUsers" });
			dispatch(fetchUsersPag(0));
			hasLoaded.current = true;
		}
	}, [dispatch]);

	const loadMoreUsers = () => {
		if (currentPage < totalPages - 1) {
			dispatch(fetchUsersPag(currentPage + 1)); // Загружаем следующую страницу
		}
	};


	// Получение диалогов для текущего пользователя
	useEffect(() => {
		if (dialoguesMessagesStatus === 'idle'){
			dispatch(fetchDialogues({userId: userId, bearerToken: bearerToken}))
		}
	}, [dispatch, dialoguesMessagesStatus, currentUser])

	// Обработчик события нажатия клавиш
	useEffect(() => {
		const handleKeyDown = event => {
			if (event.key === 'Escape') {
				setSelectedDialogue(null); // Закрыть текущий диалог
			}
		};

		window.addEventListener('keydown', handleKeyDown);

		return () => {
			window.removeEventListener('keydown', handleKeyDown);
		};
	}, []);

	const handleSendMessage = () => {
		if (newMessage.trim() && selectedDialogue) {
			const updatedMessages = [
				...selectedDialogue.messages,
				{ senderId: userId, content: newMessage },
			];
			setSelectedDialogue({ ...selectedDialogue, messages: updatedMessages });
			setNewMessage('');
		}
	};

	// Создаем массив диалогов, исключая авторизованного пользователя
	const dialogues = users
		.filter(user => user.email !== currentUser?.email) // Исключаем текущего пользователя
		.map(user => ({
			id: user.id,
			name: `${user.firstname} ${user.lastname}`,
			email: user.email,
			lastMessage: 'Начните переписку', // Последнее сообщение, если нет истории
			userId: userId,
			messages: [], // Пустой массив сообщений, т.к. это тестовые данные
		}));

	//console.log("Dialog: " + JSON.stringify(dialogue, null, 2))
	// Ищем диалог с конкретным пользователем, включающим сообщения

	//console.log("DialogForChatMessages: " + JSON.stringify(dialogueForChatMessages, null, 2))
	return (
		<div className='container'>
			<div className={styles.chat_container}>
				<div className={styles.dialogues_column}>
					<ChatDialogues
						dialogueState={dialogueState}
						users={dialogues}
						onSelect={setSelectedDialogue}
						selectedDialogue={selectedDialogue}
						status={status}
						loadMore={loadMoreUsers}
						currentPage={currentPage}
						totalPages={totalPages}
					/>
				</div>
				{selectedDialogue ? (
					<ChatMessages
						dialogueState={dialogueState}
						onSendMessage={handleSendMessage}
						newMessage={newMessage}
						setNewMessage={setNewMessage}
						selectedDialogue={selectedDialogue}
					/>
				) : (
					<div className={styles.no_dialogue}>
						Выберите диалог для начала общения
					</div>
				)}
			</div>
		</div>
	);
}export default function ChatDialogues({
	dialogueState, users,
	onSelect,
	selectedDialogue,
	status,
	loadMore,
	currentPage,
	totalPages
}) {
	const LAST_MESSAGE_MAX_LENGTH = 35
	if (status === 'loading') {
		return <div className={styles.loading}>Загрузка диалогов...</div>;
	}

	if (status === 'failed') {
		return <div className={styles.error}>Ошибка загрузки диалогов</div>;
	}

	const sortedUsers = [...users].sort((a, b) => {
		const aDialogue = dialogueState.find(dialogue => dialogue?.interlocutor?.email === a.email)?.messages;
		const bDialogue = dialogueState.find(dialogue => dialogue?.interlocutor?.email === b.email)?.messages;

		const aLastMessageDate = aDialogue && aDialogue.length > 0
			? new Date(aDialogue[aDialogue.length - 1].createdAt + 'Z')
			: null;

		const bLastMessageDate = bDialogue && bDialogue.length > 0
			? new Date(bDialogue[bDialogue.length - 1].createdAt + 'Z')
			: null;

		// Сортировка по дате последнего сообщения
		if (aLastMessageDate && bLastMessageDate) {
			return bLastMessageDate - aLastMessageDate; // От большего к меньшему
		}
		if (aLastMessageDate) {
			return -1; // a выше
		}
		if (bLastMessageDate) {
			return 1; // b выше
		}
		return 0; // Оба без сообщений
	});


	return (
		<div className={styles.dialogues_list}>
			{
			sortedUsers.map(user => {
				const unsortedMessages = dialogueState.find(dialogue => dialogue?.interlocutor?.email === user.email)?.messages;
				let sortedMessages = null;
				if (unsortedMessages){
					sortedMessages = [...unsortedMessages].sort((a, b) => new Date(b.createdAt+'Z') - new Date(a.createdAt+'Z'));
				}
				if (sortedMessages){
					console.log("last message" +  JSON.stringify(sortedMessages[0].messageContent));
				}

				return(<div
					key={user.id}
					className={`${styles.dialogue_item} ${
						selectedDialogue?.id === user.id ? styles.selected : ''
					}`}
					onClick={() => onSelect(user)}
				>
					<h4>{user.name}</h4>
					<p>{sortedMessages ? (sortedMessages[0].messageContent.length > LAST_MESSAGE_MAX_LENGTH ? sortedMessages[0].messageContent.slice(0,LAST_MESSAGE_MAX_LENGTH)+"...": sortedMessages[0].messageContent): user.lastMessage}</p>
				</div>)
			})}
			<button className={styles.loadMoreButton} onClick={() => loadMore(currentPage + 1)} disabled={currentPage === totalPages - 1}>
				Загрузить еще
			</button>
		</div>
	);
}
src\components\Chats\ChatDialogues\ChatDialogues.jsx
  Line 73:114:  'totalPages' is not defined  no-undef