import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react'
import { Route, useRouteMatch, useLocation } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import BigNumber from 'bignumber.js'
import { useWeb3React } from '@web3-react/core'
import { Image, Heading, RowType, Toggle, Text } from '@pancakeswap/uikit'
import styled from 'styled-components'
import FlexLayout from 'components/Layout/Flex'
import Page from 'components/Layout/Page'
import { useBoards } from 'state/hooks'
import useRefresh from 'hooks/useRefresh'
import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
import { useTranslation } from 'contexts/Localization'
import BoardCard from './components/BoardCard/BoardCard'
import HeaderItem from './components/HeaderItem'

const Header = styled.div`
  padding: 32px 0px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;

  ${({ theme }) => theme.mediaQueries.sm} {
    padding-left: 24px;
    padding-right: 24px;
  }
`
const SecondText = styled(Text)`
  white-space: break-spaces;
`
const FlexLayoutMain = styled(FlexLayout)`
  margin-top: 20px;
`
const Boards: React.FC = () => {
  const { t } = useTranslation()
  const boardsList = useBoards()
  const [query, setQuery] = useState('')
  const { account } = useWeb3React()

  const dispatch = useDispatch()
  const { fastRefresh } = useRefresh()
  useEffect(() => {
    dispatch(fetchBoardsPublicDataAsync())
    if (account) {
      dispatch(fetchBoardUserDataAsync(account))
    }
  }, [account, dispatch, fastRefresh])

  const renderContent = (): JSX.Element => {
    return (
      <div>
        <FlexLayout>
          {boardsList.map((board) => (
            <BoardCard key={board.pid} board={board} account={account} removed />
          ))}
        </FlexLayout>
      </div>
    )
  }

  return (
    <>
      <Header>
        <Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
          {t('Total capital pool')}
        </Heading>
        {/* <SecondText fontSize="28px" color="text">
          {t(
            'Joining the board of directors will obtain the governance token xcandy \n participate in the governance of the project, vote, obtain additional pledge income, \n and have a higher invitation airdrop reward',
          )}
        </SecondText> */}
        <Text fontSize="32px" color="text">
          1.000.000.000.000
        </Text>
        <FlexLayoutMain>
          <HeaderItem title={t('The total amount of dividends')} price={1.0} />
          <HeaderItem title={t('Pending dividend')} price={1.0} />
          <HeaderItem title={t('Number of boards')} price={1.0} />
          <HeaderItem title={t('Number of holders')} price={1.0} />
        </FlexLayoutMain>
      </Header>
      <Page>{renderContent()}</Page>
    </>
  )
}

export default Boards