PerpsSelectAdjustMarginActionView.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 PerpsAdjustMarginActionSheet, {
  type AdjustMarginAction,
} from '../../components/PerpsAdjustMarginActionSheet';
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 PerpsSelectAdjustMarginActionViewProps {
  sheetRef?: React.RefObject<BottomSheetRef | null>;
  position?: Position;
  onClose?: () => void;
}

const PerpsSelectAdjustMarginActionView: React.FC<
  PerpsSelectAdjustMarginActionViewProps
> = ({
  sheetRef: externalSheetRef,
  position: positionProp,
  onClose: onExternalClose,
}) => {
  const navigation = useNavigation<AppNavigationProp>();
  const route =
    useRoute<
      RouteProp<PerpsNavigationParamList, 'PerpsSelectAdjustMarginAction'>
    >();
  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 { navigateToAdjustMargin } = usePerpsNavigation();

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

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

      // Track UI interaction for add/remove margin selection
      const interactionType = {
        add_margin: PERPS_EVENT_VALUE.INTERACTION_TYPE.ADD_MARGIN,
        reduce_margin: PERPS_EVENT_VALUE.INTERACTION_TYPE.REMOVE_MARGIN,
      }[action];

      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,
          })
          .build(),
      );

      // Navigate BEFORE closing (prevents navigation loss from component unmounting)
      switch (action) {
        case 'add_margin':
          navigateToAdjustMargin(position, 'add');
          break;
        case 'reduce_margin':
          navigateToAdjustMargin(position, 'remove');
          break;
      }

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

  return (
    <PerpsAdjustMarginActionSheet
      onClose={handleClose}
      onSelectAction={handleActionSelect}
      sheetRef={sheetRef}
    />
  );
};

export default PerpsSelectAdjustMarginActionView;