ExchangedFlipInput2.tsx

import { div, log10, mul, round } from 'biggystring'
import type { EdgeCurrencyWallet, EdgeTokenId } from 'edge-core-js'
import React, { useMemo, useState } from 'react'
import { Platform, type ReturnKeyType, View } from 'react-native'

import { getSpecialCurrencyInfo } from '../../constants/WalletAndCurrencyConstants'
import { useDisplayDenom } from '../../hooks/useDisplayDenom'
import { useHandler } from '../../hooks/useHandler'
import { lstrings } from '../../locales/strings'
import { getExchangeDenom } from '../../selectors/DenominationSelectors'
import {
  convertCurrency,
  getExchangeRate
} from '../../selectors/WalletSelectors'
import { useSelector } from '../../types/reactRedux'
import { getCurrencyCode } from '../../util/CurrencyInfoHelpers'
import {
  DECIMAL_PRECISION,
  getDenomFromIsoCode,
  maxPrimaryCurrencyConversionDecimals,
  precisionAdjust,
  removeIsoPrefix
} from '../../util/utils'
import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
import { CryptoIcon } from '../icons/CryptoIcon'
import { EdgeRow } from '../rows/EdgeRow'
import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
import { EdgeText } from './EdgeText'
import {
  type FieldNum,
  FlipInput2,
  type FlipInputFieldInfos,
  type FlipInputRef
} from './FlipInput2'

export type ExchangeFlipInputFields = 'fiat' | 'crypto'

export interface ExchangedFlipInputRef {
  setAmount: (field: ExchangeFlipInputFields, value: string) => void
}

export interface ExchangedFlipInputAmounts {
  exchangeAmount: string
  nativeAmount: string
  fiatAmount: string
  fieldChanged: 'fiat' | 'crypto'
}

export interface Props {
  wallet: EdgeCurrencyWallet
  tokenId: EdgeTokenId
  startNativeAmount?: string
  keyboardVisible?: boolean
  headerText: string
  forceField?: 'fiat' | 'crypto'
  returnKeyType?: ReturnKeyType
  editable?: boolean
  hideMaxButton?: boolean

  onHeaderPress?: () => void | Promise<void>
  onAmountChanged: (amounts: ExchangedFlipInputAmounts) => unknown
  onBlur?: () => void
  onFocus?: () => void
  onNext?: () => void
  onMaxPress?: () => void
}

const forceFieldMap: { crypto: FieldNum; fiat: FieldNum } = {
  crypto: 0,
  fiat: 1
}

// ExchangedFlipInput2 wraps FlipInput2
// 1. It accepts native crypto amounts from the parent for initial amount and setAmount
// 2. Has FlipInput2 only show "display" amounts (ie. sats, bits, mETH)
// 3. Returns values to parent in fiat exchange amt, crypto exchange amt, and crypto native amt

const ExchangedFlipInput2Component = React.forwardRef<
  ExchangedFlipInputRef,
  Props
>((props: Props, ref) => {
  const {
    editable,
    forceField = 'crypto',
    headerText,
    hideMaxButton = false,
    keyboardVisible = true,
    onAmountChanged,
    onBlur,
    onFocus,
    onHeaderPress,
    onMaxPress,
    onNext,
    returnKeyType,
    startNativeAmount,
    tokenId,
    wallet
  } = props

  const theme = useTheme()
  const styles = getStyles(theme)

  const exchangeRates = useSelector(state => state.exchangeRates)
  const defaultIsoFiat = useSelector(state => state.ui.settings.defaultIsoFiat)
  const flipInputRef = React.useRef<FlipInputRef>(null)

  const pluginId = wallet.currencyInfo.pluginId
  const cryptoCurrencyCode = getCurrencyCode(wallet, tokenId)
  const cryptoExchangeDenom = getExchangeDenom(wallet.currencyConfig, tokenId)
  const cryptoDisplayDenom = useDisplayDenom(wallet.currencyConfig, tokenId)
  const fiatDenom = getDenomFromIsoCode(defaultIsoFiat)

  const precisionAdjustVal = precisionAdjust({
    primaryExchangeMultiplier: cryptoExchangeDenom.multiplier,
    secondaryExchangeMultiplier: fiatDenom.multiplier,
    exchangeSecondaryToPrimaryRatio: getExchangeRate(
      exchangeRates,
      pluginId,
      tokenId,
      defaultIsoFiat
    )
  })
  const cryptoMaxPrecision = maxPrimaryCurrencyConversionDecimals(
    log10(cryptoDisplayDenom.multiplier),
    precisionAdjustVal
  )
  const fieldInfos: FlipInputFieldInfos = [
    {
      currencyName: cryptoDisplayDenom.name,
      maxEntryDecimals: log10(cryptoDisplayDenom.multiplier)
    },
    {
      currencyName: removeIsoPrefix(fiatDenom.name),
      maxEntryDecimals: log10(fiatDenom.multiplier)
    }
  ]

  const convertCurrencyHandler = useHandler(
    (
      amount: string,
      pluginId: string,
      tokenId: EdgeTokenId,
      isoFiatCode: string
    ): string => {
      return convertCurrency(
        exchangeRates,
        pluginId,
        tokenId,
        isoFiatCode,
        amount
      )
    }
  )

  const convertFromCryptoNative = useHandler((nativeAmount: string) => {
    if (nativeAmount === '')
      return { fiatAmount: '', exchangeAmount: '', displayAmount: '' }
    const exchangeAmount = div(
      nativeAmount,
      cryptoExchangeDenom.multiplier,
      DECIMAL_PRECISION
    )
    const displayAmount = div(
      nativeAmount,
      cryptoDisplayDenom.multiplier,
      DECIMAL_PRECISION
    )
    const fiatAmountLong = convertCurrencyHandler(
      exchangeAmount,
      pluginId,
      tokenId,
      defaultIsoFiat
    )
    const fiatAmount = round(fiatAmountLong, -2)
    return { fiatAmount, exchangeAmount, displayAmount }
  })

  const convertFromFiat = useHandler((fiatAmount: string) => {
    if (fiatAmount === '')
      return { nativeAmount: '', exchangeAmount: '', displayAmount: '' }
    const exchangeRate = getExchangeRate(
      exchangeRates,
      pluginId,
      tokenId,
      defaultIsoFiat
    )
    if (exchangeRate === 0) {
      return { nativeAmount: '0', exchangeAmount: '0', displayAmount: '0' }
    }
    const exchangeAmountLong = div(fiatAmount, exchangeRate, DECIMAL_PRECISION)
    const nativeAmountLong = mul(
      exchangeAmountLong,
      cryptoExchangeDenom.multiplier
    )
    const displayAmountLong = div(
      nativeAmountLong,
      cryptoDisplayDenom.multiplier,
      DECIMAL_PRECISION
    )

    // Apply cryptoMaxPrecision to remove extraneous sub-penny precision
    const displayAmount = round(displayAmountLong, -cryptoMaxPrecision)

    // Convert back to native and exchange amounts after cryptoMaxPrecision has been applied
    const nativeAmount = mul(displayAmount, cryptoDisplayDenom.multiplier)
    const exchangeAmount = div(
      nativeAmount,
      cryptoExchangeDenom.multiplier,
      DECIMAL_PRECISION
    )
    return { displayAmount, nativeAmount, exchangeAmount }
  })

  const [renderDisplayAmount, setRenderDisplayAmount] = useState<string>(() => {
    const { displayAmount } = convertFromCryptoNative(startNativeAmount ?? '')
    return displayAmount
  })
  const [renderFiatAmount, setRenderFiatAmount] = useState<string>(() => {
    const { fiatAmount } = convertFromCryptoNative(startNativeAmount ?? '')
    return fiatAmount
  })

  const convertValue = useHandler(
    async (fieldNum: number, amount: string): Promise<string | undefined> => {
      if (amount === '') {
        onAmountChanged({
          exchangeAmount: '',
          nativeAmount: '',
          fiatAmount: '',
          fieldChanged: fieldNum > 0 ? 'fiat' : 'crypto'
        })
        return ''
      }
      if (fieldNum === 0) {
        const nativeAmount = mul(amount, cryptoDisplayDenom.multiplier)
        const { fiatAmount, exchangeAmount } =
          convertFromCryptoNative(nativeAmount)
        onAmountChanged({
          exchangeAmount,
          nativeAmount,
          fiatAmount,
          fieldChanged: 'crypto'
        })

        return fiatAmount
      } else {
        const { nativeAmount, exchangeAmount, displayAmount } =
          convertFromFiat(amount)
        onAmountChanged({
          exchangeAmount,
          nativeAmount,
          fiatAmount: amount,
          fieldChanged: 'fiat'
        })
        return displayAmount
      }
    }
  )

  React.useEffect(() => {
    const { exchangeAmount, displayAmount } = convertFromCryptoNative(
      startNativeAmount ?? ''
    )
    const initFiat = convertCurrencyHandler(
      exchangeAmount,
      pluginId,
      tokenId,
      defaultIsoFiat
    )
    setRenderDisplayAmount(displayAmount)
    setRenderFiatAmount(initFiat)
  }, [
    convertCurrencyHandler,
    convertFromCryptoNative,
    cryptoCurrencyCode,
    defaultIsoFiat,
    pluginId,
    startNativeAmount,
    tokenId
  ])

  React.useImperativeHandle(ref, () => ({
    setAmount: (field, value) => {
      if (field === 'crypto') {
        const { displayAmount, fiatAmount } = convertFromCryptoNative(value)
        flipInputRef.current?.setAmounts([displayAmount, fiatAmount])
      } else if (field === 'fiat') {
        const { displayAmount } = convertFromFiat(value)
        flipInputRef.current?.setAmounts([displayAmount, value])
      }
    }
  }))

  /**
   * Override the 'forceField' prop in some cases.
   * If we set 'forceField' to fiat and we don't yet have exchange rates, ensure
   * that we force the user to input a crypto amount, even if the caller wanted
   * to initialize the focused flip input field with fiat.
   */
  const overrideForceField = useMemo(
    () =>
      convertCurrencyHandler('100', pluginId, tokenId, defaultIsoFiat) === '0'
        ? 'crypto'
        : forceField,
    [convertCurrencyHandler, defaultIsoFiat, forceField, pluginId, tokenId]
  )

  const pluginInfo = getSpecialCurrencyInfo(pluginId)
  const showMaxButton =
    pluginInfo.noMaxSpend !== true && !hideMaxButton && onMaxPress != null

  return (
    <>
      <EdgeRow
        onPress={onHeaderPress}
        icon={
          <CryptoIcon
            marginRem={[0, 0.5, 0, 0]}
            pluginId={pluginId}
            sizeRem={1.5}
            tokenId={tokenId}
          />
        }
      >
        <EdgeText style={styles.headerText}>{headerText}</EdgeText>
      </EdgeRow>

      <View style={styles.flipInputContainer}>
        <View style={styles.flipInputWrapper}>
          <FlipInput2
            onBlur={onBlur}
            onFocus={onFocus}
            onNext={onNext}
            ref={flipInputRef}
            convertValue={convertValue}
            disabled={editable}
            fieldInfos={fieldInfos}
            returnKeyType={returnKeyType}
            forceFieldNum={forceFieldMap[overrideForceField]}
            keyboardVisible={keyboardVisible}
            startAmounts={[renderDisplayAmount ?? '', renderFiatAmount]}
          />
        </View>
        {showMaxButton ? (
          <EdgeTouchableOpacity
            style={styles.maxButton}
            onPress={onMaxPress}
            testID="flipInputMaxButton"
          >
            <EdgeText style={styles.maxButtonText}>
              {lstrings.string_max_cap}
            </EdgeText>
          </EdgeTouchableOpacity>
        ) : null}
      </View>
    </>
  )
})

export const ExchangedFlipInput2 = React.memo(ExchangedFlipInput2Component)

const getStyles = cacheStyles((theme: Theme) => ({
  // Header
  headerContainer: {
    marginRight: Platform.OS === 'ios' ? theme.rem(3.5) : theme.rem(1.5), // Different because adjustsFontSizeToFit behaves differently on android vs ios
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: theme.rem(1)
  },
  headerText: {
    fontWeight: '600',
    fontSize: theme.rem(1.0)
  },
  flipInputContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  flipInputWrapper: {
    flexGrow: 1
  },
  maxButton: {
    marginHorizontal: theme.rem(0.5),
    justifyContent: 'center'
  },
  maxButtonText: {
    fontFamily: theme.escapeButtonFont,
    fontSize: theme.rem(theme.escapeButtonFontSizeRem),
    color: theme.escapeButtonText
  }
}))