import { useWeb3React } from '@web3-react/core'
import { useCallback, useEffect, useMemo } from 'react'
import { userActions } from '.'
import useRefresh from '../../hooks/useRefresh'
import { useAppDispatch, useAppSelector } from '../hooks'
import { getFullDisplayBalance } from '../../utils/utils'
import { selectAdjustedBalances, selectUserData, selectUserLoading } from './selectors'

export const useAdjustedBalances = () => {
  const dispatch = useAppDispatch()
  const { account } = useWeb3React()
  const { slowRefresh } = useRefresh()
  const adjustedBalances = useAppSelector(selectAdjustedBalances)
  const { loadingGetAdjustedBalances } = useAppSelector(selectUserLoading)
  const { publicAddress } = useAppSelector(selectUserData)

  const getBalanceBySymbol = useCallback(
    (tokenSymbol) => {
      const balance = adjustedBalances.find((item) => item.tokenSymbol === tokenSymbol)
      if (!balance || !('adjustedBalance' in balance)) return 0

      return getFullDisplayBalance(balance.adjustedBalance, 4)
    },
    [adjustedBalances],
  )

  // fetch the first time
  const isFetchedBalance = useMemo(() => {
    return adjustedBalances.length !== 0 || loadingGetAdjustedBalances === false
  }, [adjustedBalances.length, loadingGetAdjustedBalances])

  useEffect(() => {
    if (account && publicAddress && account === publicAddress) {
      dispatch(userActions.getAdjustedBalances())
    }
  }, [account, dispatch, publicAddress, slowRefresh])

  return {
    adjustedBalances,
    getBalanceBySymbol,
    isFetchedBalance,
    loadingGetAdjustedBalances,
  }
}