import { useSnapshot } from 'valtio';
import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
import { CardSelect, CardSelectLoader } from '@reown/appkit-ui-react-native';
import type { WcWallet } from '@reown/appkit-common-react-native';
import type { StyleProp, ViewStyle } from 'react-native';
import { memo } from 'react';

interface WalletItemProps {
  item: WcWallet;
  displayIndex: number;
  imageHeaders?: Record<string, string>;
  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
  style?: StyleProp<ViewStyle>;
  testID?: string;
}

export function WalletItem({
  item,
  displayIndex,
  imageHeaders,
  onItemPress,
  style,
  testID
}: WalletItemProps) {
  const { walletImages } = useSnapshot(AssetController.state);
  const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
  const imageSrc = AssetUtil.getWalletImage(item, walletImages);

  if (!item?.id) {
    return <CardSelectLoader style={style} />;
  }

  return (
    <CardSelect
      imageSrc={imageSrc}
      style={style}
      imageHeaders={imageHeaders}
      name={item?.name ?? 'Unknown'}
      onPress={() => onItemPress(item, displayIndex)}
      installed={!!isInstalled}
      testID={testID}
    />
  );
}

export const MemoizedWalletItem = memo(WalletItem, (prevProps, nextProps) => {
  return prevProps.item.id === nextProps.item.id;
});