import { useRef, useEffect, useState } from 'react';
import { useNavigate } from "react-router-dom";
import { List, Avatar, Flex } from 'antd';
import { useConversationContext } from '@/stores/Conversations/ConversationContext';
import { ChatItem, ChatList } from 'react-chat-elements';
import { useGetJson } from '@/hooks/userFetch';
/**
 * []
 */
const Conversations = (() => {
  const navigate = useNavigate();
  const { switchConversation, conversationsList } = useConversationContext();
  // console.log(conversationsList);
  const [chatlist, setChatlist] = useState([]);
  useEffect(() => {
    setChatlist(
      (conversationsList || []).map((item) => ({
        ...item,
        avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name}`,
        alt: item.whatsapp_name,
        id: item.sn,
        title: item.whatsapp_name,
        subtitle: item.whatsapp_phone_number,
        // subtitle: item.lastMessage,
        date: item.last_received_time, // last_send_time
        unread: item.unread_msg_count,
      }))
    );

    return () => {};
  }, [conversationsList]);

  const onSwitchConversation = (item) => {
    switchConversation(item);
    if (item.coli_sn) {
      navigate(`/order/chat/${item.coli_sn}`, { replace: true });
    }
  }

  return (
    <>
      <ChatList className='' dataSource={chatlist} onClick={(item) => onSwitchConversation(item)} />
    </>
  );
});
export default Conversations;