type ChatBadgeProps = {|
  chatClient: ?{ client: ClientType, promise: Promise<mixed> },
|};

let globalUnreadTracker = null;
let globalUnreadListener = null;

function ChatBadge(props: ChatBadgeProps) {
  const [unreadChannels, setUnreadChannels] = React.useState(null);

  // This initialises the unread count with what our client returns on initialisation
  // If this component has been mounted previously, we will use the unread count kept in our
  // globalUnreadTracker. This is necessary as the client annoyingly doesnt keep a correct state of unread count,
  // so we have to do it ourselves.
  React.useEffect(() => {
    if (props.chatClient) {
      const refinedClient = props.chatClient;
      refinedClient.promise.then(() => {
        const newCount = refinedClient.client.user.total_unread_count || 0;
        const refined =
          globalUnreadTracker == null ? newCount : globalUnreadTracker;
        setUnreadChannels(refined);
        globalUnreadTracker = refined;
      });
    }
  }, [props.chatClient]);

  // This sets up a local and global listener to listen for changes to our unread count/
  // The local one exists so we can setState as changes come through
  // The global one exists so we can track changes that happened while this component is unmounted.
  // This means if we read a bunch of messages, we can record those unread_count changes, and then display
  // the correct value when we mount this component again.
  React.useEffect(() => {
    if (props.chatClient) {
      const callbackFunc = (event) => {
        if (event.total_unread_count !== undefined) {
          setUnreadChannels(event.total_unread_count);
          globalUnreadTracker = event.total_unread_count;
        }
      };
      const refinedClient = props.chatClient;
      refinedClient.client.on(callbackFunc);
      if (globalUnreadListener == null) {
        const globalCallbackFunc = (event) => {
          if (event.total_unread_count !== undefined) {
            globalUnreadTracker = event.total_unread_count;
          }
        };
        globalUnreadListener = globalCallbackFunc;
        refinedClient.client.on(globalUnreadListener);
      }
      return () => {
        refinedClient.client.off(callbackFunc);
      };
    }
    return () => {};
  }, [props.chatClient]);
  if (props.chatClient == null) {
    return null;
  }

  const total = unreadChannels || 0;
  if (total > 0) {
    return <Badge color={color.BUBBLE_URGENT} count={total} />;
  }
  return null;
}