import { useRef, useState, useEffect } from 'react';
import useConversationStore from '@/stores/ConversationStore';
import { useShallow } from 'zustand/react/shallow';
import { Image, Modal, Button } from 'antd';
import MessagesList from './MessagesList';
import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
import { fetchOrderConversationsList,  } from '@/actions/ConversationActions';
import { isEmpty } from '@/utils/commons';
import useAuthStore from '@/stores/AuthStore';
import { useVisibilityState } from '@/hooks/useVisibilityState';

const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
  const userId = useAuthStore((state) => state.loginUser.userId);

  const [currentConversation, updateCurrentConversation, setCurrentConversation] = useConversationStore(useShallow((state) => [state.currentConversation, state.updateCurrentConversation, state.setCurrentConversation]));
  const conversationsList = useConversationStore(useShallow((state) => state.conversationsList));
  const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: [])));
  const addToConversationList = useConversationStore((state) => state.addToConversationList);

  const receivedMessageList = useConversationStore((state) => state.receivedMessageList);
  const setMsgLoading = useConversationStore((state) => state.setMsgLoading);

  const refreshTotalNotify = useConversationStore(useShallow((state) => state.refreshTotalNotify));
  const isVisible = useVisibilityState();

  const [longList, setLongList] = useState([]);
  const [longListLoading, setLongListLoading] = useState(false);
  const [shouldScrollBottom, setShouldScrollBottom] = useState(true);
  useEffect(() => {
    if (currentConversation.sn && (activeMessages.length < 20 || forceGetMessages !== undefined)) {
      getFirstPageMessages(currentConversation);
    }
    setShouldScrollBottom(true);
    return () => {};
  }, [currentConversation.sn]);

  useEffect(() => {
    setLongList(activeMessages);
    const thisLastTime = activeMessages.length > 0 ? activeMessages[0].orgmsgtime : '';
    const loadNextPage = !(activeMessages.length === 0 || activeMessages.length < MESSAGE_PAGE_SIZE);
    updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
    return () => {};
  }, [activeMessages]);

  useEffect(() => {
    if (updateRead === true && isVisible && currentConversation.opi_sn && currentConversation.whatsapp_phone_number && activeMessages.length > 0) {
      fetchCleanUnreadMsgCount({ opisn: currentConversation.opi_sn, whatsappid: currentConversation.whatsapp_phone_number });
      refreshTotalNotify();
      updateCurrentConversation({ unread_msg_count: 0 });
    }
    return () => {};
  }, [activeMessages.length, isVisible]);


  const getFirstPageMessages = async (item) => {
    setMsgLoading(true);
    const data = await fetchMessages({ opisn: forceGetMessages ? (currentConversation.opi_sn || '') : userId, whatsappid: item.whatsapp_phone_number, lasttime: '' });
    setMsgLoading(false);
    receivedMessageList(item.sn, data);
    const thisLastTime = data.length > 0 ? data[0].orgmsgtime : '';
    const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
    updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
  };

  const getMoreMessages = async () => {
    setShouldScrollBottom(false);
    setLongListLoading(true);
    const data = await fetchMessages({ opisn: currentConversation.opi_sn, whatsappid: currentConversation.whatsapp_phone_number, lasttime: currentConversation?.lasttime || '' });
    setLongListLoading(false);
    setLongList(prevValue => data.concat(prevValue));
    const thisLastTime = data.length > 0 ? data[0].orgmsgtime : '';
    const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
    updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
    return data.length;
  };

  const reference = useRef(null);

  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewSrc, setPreviewSrc] = useState();
  const onPreviewClose = () => {
    setPreviewSrc('');
    setPreviewVisible(false);
  };
  const handlePreview = (msg) => {
    switch (msg.whatsapp_msg_type) {
      case 'image':
        setPreviewVisible(true);
        setPreviewSrc(msg.data.uri);
        return false;

      case 'document':
        window.open(msg.data.link || msg.data.uri, '_blank', 'noopener,noreferrer');
        return false;

      default:
        return false;
    }
  };

  const openContactConversation = async (whatsappID) => {
    const {coli_sn, opi_sn} = currentConversation;
    let findCurrentOrderChats = conversationsList.filter((item) => `${item.coli_sn}` === `${coli_sn}` && `${item.opi_sn}` === `${opi_sn}` && `${item.whatsapp_phone_number}` === `${whatsappID}`);
    let findCurrentIndex = isEmpty(findCurrentOrderChats) ? -1 : 0; // findCurrentOrderChats.length-1;
    let findCurrent = findCurrentOrderChats[findCurrentIndex];
    if (findCurrentIndex !== -1) {
      addToConversationList(findCurrentOrderChats);
    } else if (!isEmpty(whatsappID)) {
      const data = await fetchOrderConversationsList({ opisn: opi_sn, colisn: coli_sn, whatsappid: whatsappID });
      if (!isEmpty(data)) {
        addToConversationList(data);
        findCurrentIndex = data.findIndex((item) => `${item.coli_sn}` === `${coli_sn}` && `${item.opi_sn}` === `${opi_sn}` && `${item.whatsapp_phone_number}` === `${whatsappID}`);
        findCurrentIndex = findCurrentIndex >= 0 ? findCurrentIndex : 0;
        findCurrent = data[findCurrentIndex];
      }
    }
    if (findCurrentIndex >= 0) {
      setCurrentConversation(findCurrent);
    }
    setContactsModalVisible(false);
    return false;
  };
  const [contactsModalVisible, setContactsModalVisible] = useState(false);
  const [contactListData, setContactListData] = useState([]);
  const handleContactItemClick = (contact) => {
    openContactConversation(contact.wa_id);
  }
  const handleContactListClick = (data) => {
    setContactListData(data);
    setContactsModalVisible(true);
  }
  const handleContactClick = (data) => {
    return data.length > 1 ? handleContactListClick(data) : handleContactItemClick(data[0]);
  }
  return (
    <>
      <MessagesList messages={longList} dataSourceLen={longList.length} {...{
        reference, shouldScrollBottom,
        handlePreview, handleContactClick,
        longListLoading, setLongListLoading, getMoreMessages, loadNextPage: currentConversation?.loadNextPage ?? true
        }}
      />
      <Image width={0} height={0} src={null} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
      <Modal title="联系人" closable open={contactsModalVisible} onOk={handleContactItemClick} onCancel={() => setContactsModalVisible(false)} footer={null} >
        {contactListData.map((contact) => (
          <Button onClick={() => handleContactItemClick(contact)} type='link' key={contact.id}>{contact.name}: <span>{contact.wa_id}</span></Button>
        ))}
      </Modal>
    </>
  );
};
export default MessagesWrapper;
