import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { useDispatch } from 'react-redux'
import { fetchReferralInfoAsync } from 'state/actions'
import { useAccount } from 'state/userInfo/hooks'
import { formatDivNumber } from 'utils/formatBalance'
import { useTranslation } from 'contexts/Localization'
import useToast from 'hooks/useToast'
import { Button, useModal, Text } from '@pancakeswap/uikit'
import {
  useReferralNormalConfigInfo,
  useReferralCommanderConfigInfo,
  useReferralRewardInfo,
} from 'state/referral/hooks'
import FlexCom from './FlexCom'
import BuyNftModal from './BuyNftModal'
import HeaderMain from './HeaderMain'
import { useWithdraw } from '../hooks'

const ButtonDiv = styled(Button)`
  width: 100%;
  margin: 20px auto 0px auto;
  border-radius: 50px;
  font-size: 16px;
  border: 1px solid #dcdcdc;
  color: #dcdcdc;
`
const ButtonGet = styled(Button)`
  width: 100%;
  font-size: 16px;
  margin: 20px auto 0px auto;
  border-radius: 50px;
  border: 1px solid #1fc7d4;
  color: #1fc7d4;
`

const UpBtn = styled(Button)`
  width: 100%;
  margin: 20px auto 0px auto;
  border-radius: 50px;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
  border: none;
`

const FooterBtn = styled.div`
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
`
const MainDiv = styled.div`
  padding: 0 50px;
`
const FooterDiv = styled.div`
  margin: 0 auto 30px auto;
`
const TextDiv = styled(Text)`
  margin-top: 10px;
  font-size: 14px;
  color: #999999;
`

const ConnectedCom: React.FC = () => {
  const dispatch = useDispatch()
  const account = useAccount()
  const { t } = useTranslation()
  const [onBuyModal] = useModal(<BuyNftModal />)
  const [gain, getGain] = useState(true)
  const referralNormalConfigInfo = useReferralNormalConfigInfo()
  const referralRewardInfo = useReferralRewardInfo()

  const [loading, setLoading] = useState(false)
  const withdraw = useWithdraw()
  const { toastSuccess } = useToast()
  const handleWithdraw = async () => {
    setLoading(true)
    try {
      dispatch(fetchReferralInfoAsync(account))
      await withdraw()
      setLoading(false)
      toastSuccess(t('Successfully claimed!'))
      getGain(false)
    } catch (error) {
      setLoading(false)
    }
  }
  return (
    <MainDiv>
      <HeaderMain title={t('recommend')} />
      <>
        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo?.inviteNum || 0}(${t('person')})`} />
        <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo?.inviteReward || 0}(HCC)`} />
        <FlexCom
          name={t('To get profit')}
          value={`${gain ? referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive || 0 : 0}(HCC)`}
        />
      </>
      <FooterBtn>
        {referralNormalConfigInfo?.receiveLimit <=
          referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive && gain ? (
          <ButtonGet onClick={handleWithdraw} disabled={loading} variant="secondary">
            {t('Claim now')}
          </ButtonGet>
        ) : (
          <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
        )}

        <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
      </FooterBtn>
      <FooterDiv>
        <TextDiv>{t('footer %number% text', { number: `${referralNormalConfigInfo?.dividendFirst || 0}%` })}</TextDiv>
        {/* <TextDiv color="textSubtle">{t('each time')}</TextDiv>
        <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv> */}
      </FooterDiv>
    </MainDiv>
  )
}
export default ConnectedCom