PerpsSelectModifyActionView.tsx

import React, { useCallback, useRef } from 'react';
import {
  useNavigation,
  useRoute,
  type RouteProp,
} from '@react-navigation/native';
import type { AppNavigationProp } from '../../../../../core/NavigationService/types';

import {
  PERPS_EVENT_PROPERTY,
  PERPS_EVENT_VALUE,
  type Position,
} from '@metamask/perps-controller';
import type { PerpsNavigationParamList } from '../../types/navigation';
import PerpsModifyActionSheet, {
  type ModifyAction,
} from '../../components/PerpsModifyActionSheet';
import { usePerpsNavigation } from '../../hooks/usePerpsNavigation';
import { type BottomSheetRef } from '@metamask/design-system-react-native';
import { MetaMetricsEvents } from '../../../../../core/Analytics';
import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';

interface PerpsSelectModifyActionViewProps {
  sheetRef?: React.RefObject<BottomSheetRef | null>;
  position?: Position;
  onClose?: () => void;
  onReversePosition?: (position: Position) => void;
  testID?: string;
}

const PerpsSelectModifyActionView: React.FC<
  PerpsSelectModifyActionViewProps
> = ({
  sheetRef: externalSheetRef,
  position: positionProp,
  onClose: onExternalClose,
  onReversePosition,
  testID,
}) => {
  const navigation = useNavigation<AppNavigationProp>();
  const route =
    useRoute<RouteProp<PerpsNavigationParamList, 'PerpsSelectModifyAction'>>();
  const { trackEvent, createEventBuilder } = useAnalytics();

  // Support both props and route params
  const position = positionProp || route.params?.position;
  const internalSheetRef = useRef<BottomSheetRef>(null);
  const sheetRef = externalSheetRef || internalSheetRef;
  const { navigateToOrder, navigateToClosePosition } = usePerpsNavigation();

  const handleClose = useCallback(() => {
    if (externalSheetRef) {
      onExternalClose?.();
    } else {
      navigation.goBack();
    }
  }, [navigation, externalSheetRef, onExternalClose]);

  const handleActionSelect = useCallback(
    (action: ModifyAction) => {
      if (!position) return;

      // Track UI interaction based on action type
      const getInteractionType = () => {
        switch (action) {
          case 'add_to_position':
            return PERPS_EVENT_VALUE.INTERACTION_TYPE.INCREASE_EXPOSURE;
          case 'reduce_position':
            return PERPS_EVENT_VALUE.INTERACTION_TYPE.REDUCE_EXPOSURE;
          case 'flip_position':
            return PERPS_EVENT_VALUE.INTERACTION_TYPE.FLIP_POSITION;
          default:
            return null;
        }
      };

      const interactionType = getInteractionType();
      if (interactionType) {
        trackEvent(
          createEventBuilder(MetaMetricsEvents.PERPS_UI_INTERACTION)
            .addProperties({
              [PERPS_EVENT_PROPERTY.INTERACTION_TYPE]: interactionType,
              [PERPS_EVENT_PROPERTY.ASSET]: position.symbol,
              [PERPS_EVENT_PROPERTY.SOURCE]:
                PERPS_EVENT_VALUE.SOURCE.POSITION_SCREEN,
              [PERPS_EVENT_PROPERTY.DIRECTION]:
                parseFloat(position.size) > 0
                  ? PERPS_EVENT_VALUE.DIRECTION.LONG
                  : PERPS_EVENT_VALUE.DIRECTION.SHORT,
            })
            .build(),
        );
      }

      // Navigate BEFORE closing (prevents navigation loss from component unmounting)
      switch (action) {
        case 'add_to_position':
          // Open trade screen in same direction with existing position context
          {
            const direction = parseFloat(position.size) > 0 ? 'long' : 'short';
            navigateToOrder({
              direction,
              asset: position.symbol,
              existingPosition: position, // Pass position to maintain leverage consistency
              hideTPSL: true, // Hide TP/SL when adding to existing position
              source: PERPS_EVENT_VALUE.SOURCE.POSITION_SCREEN,
            });
          }
          break;

        case 'reduce_position':
          // Open close position screen
          navigateToClosePosition(
            position,
            PERPS_EVENT_VALUE.SOURCE.POSITION_SCREEN,
          );
          break;

        case 'flip_position':
          // If parent provides onReversePosition callback, use it (shows confirmation sheet)
          // Otherwise, navigate directly to order screen (legacy behavior)
          if (onReversePosition) {
            onReversePosition(position);
          } else {
            const oppositeDirection =
              parseFloat(position.size) > 0 ? 'short' : 'long';
            const positionSize = Math.abs(parseFloat(position.size));
            const positionLeverage = position.leverage?.value;

            navigateToOrder({
              direction: oppositeDirection,
              asset: position.symbol,
              amount: positionSize.toString(),
              leverage: positionLeverage,
              source: PERPS_EVENT_VALUE.SOURCE.POSITION_SCREEN,
            });
          }
          break;
      }

      // Close bottom sheet AFTER navigation is triggered
      sheetRef.current?.onCloseBottomSheet(handleClose);
    },
    [
      position,
      navigateToOrder,
      navigateToClosePosition,
      onReversePosition,
      sheetRef,
      handleClose,
      trackEvent,
      createEventBuilder,
    ],
  );

  return (
    <PerpsModifyActionSheet
      onClose={handleClose}
      position={position}
      onActionSelect={handleActionSelect}
      sheetRef={sheetRef}
      testID={testID}
    />
  );
};

export default PerpsSelectModifyActionView;