import { useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Collapse } from 'react-vant'
import Button from '~/components/Button'
import { eth_pledgeProducts } from '~/contract/api'
import { useRouter } from '~/hooks/useRouter'
import '~/styles/home.scss'
import { openGitBook } from '~/utils'
import { toString } from '~/utils/wei'

const Home = () => {

  const { push } = useRouter()
  const { t } = useTranslation()

  const [pledgeList, setPledgeList] = useState([
    { day: 180, rate: 1408 },
    { day: 270, rate: 1521 },
    { day: 360, rate: 1623 },
  ])
  const [pledgeIndex, setPledgeIndex] = useState(0)

  const pledgeHelp = useMemo(() => [
    { title: '1. Stake', desc: 'Choose a staking plan' },
    { title: '2. Receive NFT', desc: 'NFT as a stake certificate to withdraw daily staking rewards' },
    { title: '3. Maturity', desc: 'Holding NFT can redeem all staking amount' },
  ], [])

  const collapseData = useMemo(() => [
    { title: 'Why should I stake Filecoin?', desc: 'FAQ1' },
    { title: 'What can I do with the NFT after receiving it?', desc: 'FAQ2' },
    { title: 'Where do my reward from staking come from?', desc: 'FAQ3' },
  ], [])

  const getData = async () => {
    const res = await eth_pledgeProducts()
    res.data && setPledgeList(res.data)
  }

  useEffect(() => {
    getData()
  }, [])
  return (
    <div className="home">
      <div className="liner-box">
        <div className='radius pl-3'>
          <div className='fz-26 mt-3 fz-wb-550'>{t('STAKE TO EARN')}</div>
          <div className='mt-2'>
            <Button className='start-button' onClick={() => push('/pledge')}>{t('Get Started')}</Button>
          </div>
        </div>
        <div className='logo'></div>
      </div>
      <div className='plr-1'>
        <div className='product-box mt-3 row-center'>
          <div className='box'>
            <BinancePag />
            <div className='row-between mt-2'>
              <div className='row-items'>
                {
                  pledgeList.map((item, index) => (
                    <div
                      key={index}
                      onClick={() => setPledgeIndex(index)}
                      className={`mr-1 tabs-box row-center ${pledgeIndex === index && 'active-tab-box'}`}
                    >{item.day} {t('Days')}</div>
                  ))
                }
              </div>
              <div className='iconfont icon-arrow fz-20 fz-wb-550' onClick={() => push('/pledge', { index: pledgeIndex })}></div>
            </div>
            <div className='mt-2 row-between'>
              <div>{t('Annualized Percentage Rate (APR)')}</div>
              <div className='fz-26 fz-wb-550'>{toString(pledgeList[pledgeIndex].rate,2)}%</div>
            </div>
          </div>
        </div>
      </div>

      <div className='tac fz-18px fz-wb-550 mt-3'>{t('Upcoming Soon')}</div>
      <div className='Upcoming plr-1'>
        <div className='box mt-1'>
          <BinancePag title='Flexible' color='#0E52A5' />
          <div className='mt-1'>{t('Flexible Staking Subscription')}</div>
        </div>
        <div className='box mt-1'>
          <BinancePag />
          <div className='mt-1'>{t('90 Days Staking Subscriptiong')}</div>
        </div>
      </div>

      <div className='tac fz-18px fz-wb-550 mt-3'>{t('How It Works')}</div>
      <div className='mt-1 help'>
        {
          pledgeHelp.map((item, index) => (
            <div className={`help-box help-bg-${index} help-bg-img-${index + 1} ml-1 ${index === 2 && 'mr-1'} row-between`} key={index}>
              <div>
                <div className='fz-18'>{t(item.title)}</div>
                <div className='fz-14 mt-1'>{t(item.desc)}</div>
              </div>

              <img src={require(`~/assets/help-${index}.png`)} className={`ml-1 help-img-${index}`} alt="" />
            </div>
          ))
        }
      </div>

      <div className='tac fz-18px fz-wb-550 mt-3'>{t('Refer To Earn')}</div>
      <div className='plr-1'>
        <div className='refer row-center'>
          <img src={require('~/assets/group.png')} className='img' alt="" />
          <div className='box p-2'>
            <div className='fz-wb-550 tac'>{t('Up To 7% of Referees Staking Rewards')}</div>
            <div className='row-center mt-1 plr-1' onClick={() => {
              push('/myPledge')
            }}>
              <div className='tac fz-14'>{t('By sharing your referral code and introducing your friends to SOFIL and stake, you can earn referral rewards and withdraw everyday.')}</div>
              <div className='iconfont icon-arrow fz-26'></div>
            </div>
          </div>
        </div>
      </div>

      <div className='tac fz-18px fz-wb-550 mt-3'>{t('FAQs')}</div>
      <div className='plr-3 mb-3 mt-1'>
        <Collapse border={false}>
          {
            collapseData.map((item, index) => (
              <Collapse.Item title={t(item.title)} name={index} key={index} className='mb-1'>
                {t(item.desc)}
              </Collapse.Item>
            ))
          }
        </Collapse>
        <div className='row-center'>
          <Button className='understand-button mt-3 fz-wb-550' onClick={() => {
            openGitBook()
          }}>{t('Learn More')}</Button>
        </div>
      </div>
    </div>
  )
}

interface BinancePagProps {
  title?: string;
  color?: string
}

const BinancePag = (props: BinancePagProps) => {

  const { t } = useTranslation()
  const { title, color } = props

  return (
    <div className='BinancePag row-between' style={{ alignItems: 'start' }}>
      <div className='row-items'>
        <img src={require('~/assets/bsc-fil.png')} className='img' alt="" />
        <div className='ml-1'>
          <div className='fz-wb-550'>Binance-Peg Filecoin</div>
          <div className='mt-5px fz-14'>FIL</div>
        </div>
      </div>
      <Button className='Locked' style={{ background: color, color: color && '#fff' }}>{title ? t(title) : t('Locked')}</Button>
    </div>
  )
}

export default Home