import { useCallback, useEffect, useState } from 'react';

import { Event, LocalMessage, UserResponse } from 'stream-chat';

import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
import { useChatContext } from '../../../contexts/chatContext/ChatContext';

export const useMessageReadData = ({ message }: { message?: LocalMessage }) => {
  const { channel } = useChannelContext();
  const { client } = useChatContext();
  const calculate = useCallback(() => {
    if (!message?.created_at) {
      return [];
    }
    const messageRef = {
      msgId: message.id,
      timestampMs: new Date(message.created_at).getTime(),
    };

    return channel.messageReceiptsTracker.readersForMessage(messageRef);
  }, [channel, message]);

  const [readBy, setReadBy] = useState<UserResponse[]>([]);

  useEffect(() => {
    setReadBy(calculate());
  }, [calculate]);

  useEffect(() => {
    const { unsubscribe } = channel.on('message.read', (event: Event) => {
      /**
       * An optimization to only re-calculate if the event is received by a different user.
       */
      if (event.user?.id !== client.user?.id) {
        setReadBy(calculate());
      }
    });
    return unsubscribe;
  }, [channel, calculate, client.user?.id]);

  return readBy;
};