import { Coin } from '@cosmjs/stargate'
import { AnimatedNumber } from 'components/common'
import { useEffect, useState } from 'react'
import useStore from 'store'

interface Props {
  coin: Coin
  prefixClass?: string
  valueClass?: string
  isApproximation?: boolean
  className?: string
}

export const DisplayCurrency = ({
  coin,
  prefixClass,
  valueClass,
  isApproximation,
  className,
}: Props) => {
  const networkConfig = useStore((s) => s.networkConfig)
  const convertToDisplayCurrency = useStore((s) => s.convertToDisplayCurrency)
  const amount = convertToDisplayCurrency(coin)
  const [displayCurrency, setDisplayCurrency] = useState<DisplayCurrency>(
    networkConfig?.displayCurrency,
  )

  useEffect(() => {
    if (!networkConfig) return
    if (displayCurrency.denom !== networkConfig?.displayCurrency.denom)
      setDisplayCurrency(networkConfig?.displayCurrency)
  }, [networkConfig?.displayCurrency, displayCurrency.denom, networkConfig])

  if (!displayCurrency) return null

  return (
    <div className={className}>
      {displayCurrency.prefix && (
        <span className={prefixClass}>
          {displayCurrency.prefix}
          {isApproximation && '~'}
        </span>
      )}
      <span className={valueClass}>
        <AnimatedNumber
          amount={amount}
          minDecimals={displayCurrency.decimals}
          maxDecimals={displayCurrency.decimals}
        />
      </span>
      {displayCurrency.suffix && <span className={valueClass}>{' ' + displayCurrency.suffix}</span>}
    </div>
  )
}
