import React, { useState, useCallback, useMemo } from 'react'
import BigNumber from 'bignumber.js'
import styled from 'styled-components'
import { provider as ProviderType } from 'web3-core'
import { getAddress } from 'utils/addressHelpers'
import { Button, Flex, Text } from '@pancakeswap/uikit'
import { useTranslation } from 'contexts/Localization'
import { Boards } from 'state/types'
import { useBoardUser, usePriceCakeBusd, usePriceHccUsdt } from 'state/hooks'
import { TOKEN_SYMBOL } from 'config/index'

import { useWeb3React } from '@web3-react/core'
import { BIG_ZERO } from 'utils/bigNumber'

import { getBalanceNumber, getBalanceAmount } from 'utils/formatBalance'
import { useERC20 } from 'hooks/useContract'
import UnlockButton from 'components/UnlockButton'
import useApproveBoard from '../../hooks/useApproveBoard'
import StakeAction from './StakeAction'
import HarvestAction from './HarvestAction'

import useHarvestBoard from '../../hooks/useHarvestBoard'
import FlexText from './FlexText'

const Action = styled.div`
  padding-top: 4px;
`
const PriceCoin = styled.div`
  text-align: right;
`

interface NodeCardActionsProps {
  board: Boards
  provider?: ProviderType
  accountData?: string
}

const CardActions: React.FC<NodeCardActionsProps> = ({ board, accountData }) => {
  const { t } = useTranslation()
  const [requestedApproval, setRequestedApproval] = useState(false)
  const pid = board.pid
  const { allowance, tokenBalance, stakedBalance, estimatedProfit } = useBoardUser(pid)
  const isApproved = accountData && allowance && allowance.isGreaterThan(0)
  const tokenContract = useERC20(getAddress(board.tokenAddresses))

  const { onApprove } = useApproveBoard(tokenContract, pid)

  const { account } = useWeb3React()
  const rawEarningsBalance = account ? getBalanceAmount(new BigNumber(estimatedProfit)).toNumber() : BIG_ZERO
  const displayBalance = rawEarningsBalance.toFixed(3, BigNumber.ROUND_DOWN)
  const hccPriceUsdt = usePriceHccUsdt()

  const handleApprove = useCallback(async () => {
    try {
      setRequestedApproval(true)
      await onApprove()
      setRequestedApproval(false)
    } catch (e) {
      console.error(e)
    }
  }, [onApprove])
  const [totalPrice, setTotalPrice] = useState(0)
  useMemo(() => {
    setTotalPrice(getBalanceAmount(new BigNumber(board?.userData?.receiveReward)).toNumber() + Number(displayBalance))
  }, [board])

  const renderApprovalOrStakeButton = () => {
    return isApproved ? (
      <>
        <FlexText name={t('The total amount of dividends')} value={totalPrice.toFixed(3)} />
        <Flex justifyContent="space-between" alignItems="center">
          <Text fontSize="12px" color="#1FC7D4">
            {t('Unclaimed income')}
          </Text>
          <PriceCoin>
            <Text fontSize="16px" color="#1FC7D4">
              {displayBalance}
            </Text>
            <Text fontSize="12px" color="#9BE5EB">
              {(Number(hccPriceUsdt.toNumber().toFixed(3)) * Number(displayBalance)).toFixed(3)} USDT
            </Text>
          </PriceCoin>
        </Flex>
        {/* <FlexText name={t('Unclaimed income')} value={displayBalance} /> */}
        {/* <Flex>
          <Text bold textTransform="uppercase" color="secondary" fontSize="12px" pr="3px">
            {board.tokenSymbol}
          </Text>
          <Text bold textTransform="uppercase" color="textSubtle" fontSize="12px">
            {t('Staked')}
          </Text>
        </Flex> */}
        <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} />
        <StakeAction stakedBalance={stakedBalance} tokenBalance={tokenBalance} pid={pid} board={board} />
        {/* <Flex flexDirection="column" alignItems="flex-start" mt="10"> */}
        {/* <Text color="textSubtle" fontSize="12px">
            {t('Unclaimed income')}
          </Text> */}
        {/* <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} /> */}
        {/* </Flex> */}
      </>
    ) : (
      <Button mt="8px" width="100%" disabled={requestedApproval} onClick={handleApprove}>
        {t('license agreement')}
      </Button>
    )
  }

  return <Action>{!accountData ? <UnlockButton mt="8px" width="100%" /> : renderApprovalOrStakeButton()}</Action>
}

export default CardActions