text: import React, { useMemo } from 'react';
  import { useWallet } from 'use-wallet';
  import moment from 'moment';
  import styled from 'styled-components';
  import Spacer from '../../components/Spacer';
  import Harvest from './components/Harvest';
  import Stake from './components/Stake';
  import { makeStyles } from '@material-ui/core/styles';
  
  import { Box, Card, CardContent, Button, Typography, Grid } from '@material-ui/core';
  
  //import { Alert } from '@material-ui/lab';
  
  import UnlockWallet from '../../components/UnlockWallet';
  import Page from '../../components/Page';
  
  import useRedeemOnBoardroom from '../../hooks/useRedeemOnBoardroom';
  import useStakedBalanceOnBoardroom from '../../hooks/useStakedBalanceOnBoardroom';
  import { getDisplayBalance } from '../../utils/formatBalance';
  import useCurrentEpoch from '../../hooks/useCurrentEpoch';
  import useFetchBoardroomAPR from '../../hooks/useFetchBoardroomAPR';
  
  import useCashPriceInEstimatedTWAP from '../../hooks/useCashPriceInEstimatedTWAP';
  import useTreasuryAllocationTimes from '../../hooks/useTreasuryAllocationTimes';
  import useTotalStakedOnBoardroom from '../../hooks/useTotalStakedOnBoardroom';
  import useClaimRewardCheck from '../../hooks/boardroom/useClaimRewardCheck';
  import useWithdrawCheck from '../../hooks/boardroom/useWithdrawCheck';
  import ProgressCountdown from './components/ProgressCountdown';
  import { createGlobalStyle } from 'styled-components';
  import { Helmet } from 'react-helmet'
  
  import HomeImage from '../../assets/img/Image_Bond.png';
  const BackgroundImage = createGlobalStyle`
    body {
      background: url(${HomeImage}) repeat !important;
      background-size: cover !important;
      background-color: #171923;
    }
  `;
  const TITLE = 'bomb.money | Boardroom'
  
  const useStyles = makeStyles((theme) => ({
    gridItem: {
      height: '100%',
      [theme.breakpoints.up('md')]: {
        height: '90px',
      },
    },
  }));
  
  const Boardroom = () => {
    const classes = useStyles();
    const { account } = useWallet();
    const { onRedeem } = useRedeemOnBoardroom();
    const stakedBalance = useStakedBalanceOnBoardroom();
    const currentEpoch = useCurrentEpoch();
    const cashStat = useCashPriceInEstimatedTWAP();
    const totalStaked = useTotalStakedOnBoardroom();
    const boardroomAPR = useFetchBoardroomAPR();
    const canClaimReward = useClaimRewardCheck();
    const canWithdraw = useWithdrawCheck();
    const scalingFactor = useMemo(() => (cashStat ? Number(cashStat.priceInDollars).toFixed(4) : null), [cashStat]);
    const { to } = useTreasuryAllocationTimes();
  
    return (
      <Page>
        <BackgroundImage />
        <Helmet>
          <title>{TITLE}</title>
        </Helmet>
        {!!account ? (
          <>
            <Typography color="textPrimary" align="center" variant="h3" gutterBottom>
              Boardroom
            </Typography>
            <Box mt={5}>
              <Grid container justify="center" spacing={3}>
                <Grid item xs={12} md={2} lg={2} className={classes.gridItem}>
                  <Card className={classes.gridItem}>
                    <CardContent style={{ textAlign: 'center' }}>
                      <Typography style={{ textTransform: 'uppercase', color: '#f9d749' }}>Next Epoch</Typography>
                      <ProgressCountdown base={moment().toDate()} hideBar={true} deadline={to} description="Next Epoch" />
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12} md={2} lg={2} className={classes.gridItem}>
                  <Card className={classes.gridItem}>
                    <CardContent align="center">
                      <Typography style={{ textTransform: 'uppercase', color: '#f9d749' }}>Current Epoch</Typography>
                      <Typography>{Number(currentEpoch)}</Typography>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12} md={2} lg={2} className={classes.gridItem}>
                  <Card className={classes.gridItem}>
                    <CardContent align="center">
                      <Typography style={{ textTransform: 'uppercase', color: '#f9d749' }}>
                        BOMB PEG <small>(TWAP)</small>
                      </Typography>
                      <Typography>{scalingFactor} BTC</Typography>
                      <Typography>
                        <small>per 10,000 BOMB</small>
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12} md={2} lg={2} className={classes.gridItem}>
                  <Card className={classes.gridItem}>
                    <CardContent align="center">
                      <Typography style={{ textTransform: 'uppercase', color: '#f9d749' }}>APR</Typography>
                      <Typography>{boardroomAPR.toFixed(2)}%</Typography>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12} md={2} lg={2}>
                  <Card className={classes.gridItem}>
                    <CardContent align="center">
                      <Typography style={{ textTransform: 'uppercase', color: '#f9d749' }}>BSHARES Staked</Typography>
                      <Typography>{getDisplayBalance(totalStaked)}</Typography>
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>
  
              {/* <Grid container justify="center">
                <Box mt={3} style={{ width: '600px' }}>
                  <Alert variant="filled" severity="warning">
                    <b> Boardroom smart contract has been updated! </b><br />
                    If you have BSHARE in the previous Boardroom, visit here to retrieve it:<br />
                    <a href="https://61aadb35c5a5c50007c2a61b--bomb-money.netlify.app/boardroom">https://61aadb35c5a5c50007c2a61b--bomb-money.netlify.app/boardroom</a><br /><br />
                  </Alert>
  
                </Box>
              </Grid> */}
  
              <Box mt={4}>
                <StyledBoardroom>
                  <StyledCardsWrapper>
                    <StyledCardWrapper>
                      <Harvest />
                    </StyledCardWrapper>
                    <Spacer />
                    <StyledCardWrapper>
                      <Stake />
                    </StyledCardWrapper>
                  </StyledCardsWrapper>
                </StyledBoardroom>
              </Box>
  
              {/* <Grid container justify="center" spacing={3}>
              <Grid item xs={4}>
                <Card>
                  <CardContent align="center">
                    <Typography>Rewards</Typography>
  
                  </CardContent>
                  <CardActions style={{justifyContent: 'center'}}>
                    <Button color="primary" variant="outlined">Claim Reward</Button>
                  </CardActions>
                  <CardContent align="center">
                    <Typography>Claim Countdown</Typography>
                    <Typography>00:00:00</Typography>
                  </CardContent>
                </Card>
              </Grid>
              <Grid item xs={4}>
                <Card>
                  <CardContent align="center">
                    <Typography>Stakings</Typography>
                    <Typography>{getDisplayBalance(stakedBalance)}</Typography>
                  </CardContent>
                  <CardActions style={{justifyContent: 'center'}}>
                    <Button>+</Button>
                    <Button>-</Button>
                  </CardActions>
                </Card>
              </Grid>
            </Grid> */}
            </Box>
  
            <Box mt={5}>
              <Grid container justify="center" spacing={3} mt={10}>
                <Button
                  disabled={stakedBalance.eq(0) || (!canWithdraw && !canClaimReward)}
                  onClick={onRedeem}
                  className={
                    stakedBalance.eq(0) || (!canWithdraw && !canClaimReward)
                      ? 'shinyButtonDisabledSecondary'
                      : 'shinyButtonSecondary'
                  }
                >
                  Claim &amp; Withdraw
                </Button>
              </Grid>
            </Box>
          </>
        ) : (
          <UnlockWallet />
        )}
      </Page>
    );
  };
  
  const StyledBoardroom = styled.div`
    align-items: center;
    display: flex;
    flex-direction: column;
    @media (max-width: 768px) {
      width: 100%;
    }
  `;
  
  const StyledCardsWrapper = styled.div`
    display: flex;
    width: 600px;
    @media (max-width: 768px) {
      width: 100%;
      flex-flow: column nowrap;
      align-items: center;
    }
  `;
  
  const StyledCardWrapper = styled.div`
    display: flex;
    flex: 1;
    flex-direction: column;
    @media (max-width: 768px) {
      width: 80%;
    }
  `;
  
  export default Boardroom;
  