// @flow

import * as React from 'react';

import { useMessageListData } from 'lib/selectors/chat-selectors';

import { useSelector } from '../redux/redux-utils';
import type { LayoutCoordinates, VerticalBounds } from '../types/layout-types';
import { useHeightMeasurer } from './chat-context';
import type { ChatMessageItemWithHeight } from './message-list-container.react';
import {
  type ChatMessageInfoItemWithHeight,
  messageItemHeight,
} from './message.react';
import { getSidebarThreadInfo } from './sidebar-navigation';
import { timestampHeight } from './timestamp.react';

function chatMessageItemHeight(item: ChatMessageItemWithHeight): number {
  if (item.itemType === 'loader') {
    return 56;
  }
  return messageItemHeight(item);
}

function useMessageTargetPosition(
  sourceMessage: ChatMessageInfoItemWithHeight,
  initialCoordinates: LayoutCoordinates,
  messageListVerticalBounds: VerticalBounds,
): number {
  const viewerID = useSelector(
    state => state.currentUserInfo && state.currentUserInfo.id,
  );
  const sidebarThreadInfo = React.useMemo(() => {
    return getSidebarThreadInfo(sourceMessage, viewerID);
  }, [sourceMessage, viewerID]);

  const messageListData = useMessageListData({
    searching: false,
    userInfoInputArray: [],
    threadInfo: sidebarThreadInfo,
  });

  const [
    messagesWithHeight,
    setMessagesWithHeight,
  ] = React.useState<?$ReadOnlyArray<ChatMessageItemWithHeight>>(null);
  const measureMessages = useHeightMeasurer();

  React.useEffect(() => {
    if (messageListData) {
      measureMessages(
        messageListData,
        sidebarThreadInfo,
        setMessagesWithHeight,
      );
    }
  }, [measureMessages, messageListData, sidebarThreadInfo]);

  const sourceMessageID = sourceMessage.messageInfo?.id;
  const targetDistanceFromBottom = React.useMemo(() => {
    if (!messagesWithHeight) {
      return 0;
    }

    let offset = 0;
    for (const message of messagesWithHeight) {
      offset += chatMessageItemHeight(message);
      if (message.messageInfo && message.messageInfo.id === sourceMessageID) {
        return offset;
      }
    }

    return (
      messageListVerticalBounds.height + chatMessageItemHeight(sourceMessage)
    );
  }, [
    messageListVerticalBounds.height,
    messagesWithHeight,
    sourceMessage,
    sourceMessageID,
  ]);

  const currentDistanceFromBottom =
    messageListVerticalBounds.height +
    messageListVerticalBounds.y -
    initialCoordinates.y +
    timestampHeight;
  return targetDistanceFromBottom - currentDistanceFromBottom;
}

export { chatMessageItemHeight, useMessageTargetPosition };

@@ -14,30 +14,113 @@
 ort 
-* as React from 'react
+invariant from 'invariant';%0Aimport * as React from 'react';%0Aimport Animated from 'react-native-reanimated
 ';%0A%0A
@@ -322,25 +322,96 @@
 es';%0Aimport 
-%7B
+type %7B AnimatedViewStyle %7D from '../types/styles';%0Aimport %7B ChatContext,
  useHeightMe
@@ -732,16 +732,183 @@
 eact';%0A%0A
+/* eslint-disable import/no-named-as-default-member */%0Aconst %7B Node, Extrapolate, interpolateNode %7D = Animated;%0A/* eslint-enable import/no-named-as-default-member */%0A%0A
 function
@@ -2887,64 +2887,1282 @@
 %0A%7D%0A%0A
-export %7B chatMessageItemHeight, useMessageTargetPosition 
+function useAnimatedMessageTooltipButton(%0A  sourceMessage: ChatMessageInfoItemWithHeight,%0A  initialCoordinates: LayoutCoordinates,%0A  messageListVerticalBounds: VerticalBounds,%0A  progress: Node,%0A): %7B +style: AnimatedViewStyle %7D %7B%0A  const targetPosition = useMessageTargetPosition(%0A    sourceMessage,%0A    initialCoordinates,%0A    messageListVerticalBounds,%0A  );%0A%0A  const chatContext = React.useContext(ChatContext);%0A  invariant(chatContext, 'chatContext should be set');%0A  const %7B%0A    currentTransitionSidebarSourceID,%0A    setCurrentTransitionSidebarSourceID,%0A  %7D = chatContext;%0A%0A  React.useEffect(() =%3E %7B%0A    return () =%3E setCurrentTransitionSidebarSourceID(null);%0A  %7D, %5BsetCurrentTransitionSidebarSourceID%5D);%0A%0A  const bottom = React.useMemo(%0A    () =%3E%0A      interpolateNode(progress, %7B%0A        inputRange: %5B0, 1%5D,%0A        outputRange: %5BtargetPosition, 0%5D,%0A        extrapolate: Extrapolate.CLAMP,%0A      %7D),%0A    %5Bprogress, targetPosition%5D,%0A  );%0A%0A  const messageContainerStyle = React.useMemo(() =%3E %7B%0A    return %7B%0A      bottom: currentTransitionSidebarSourceID ? bottom : 0,%0A    %7D;%0A  %7D, %5Bbottom, currentTransitionSidebarSourceID%5D);%0A%0A  return %7B%0A    style: messageContainerStyle,%0A  %7D;%0A%7D%0A%0Aexport %7B%0A  getSidebarThreadInfo,%0A  chatMessageItemHeight,%0A  useAnimatedMessageTooltipButton,%0A
 %7D;%0A

Create a hook which handles source message animation