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 useRedeemOnMasonry from '../../hooks/useRedeemOnMasonry';
  import useStakedBalanceOnMasonry from '../../hooks/useStakedBalanceOnMasonry';
  import { getDisplayBalance } from '../../utils/formatBalance';
  import useCurrentEpoch from '../../hooks/useCurrentEpoch';
  import useFetchMasonryAPR from '../../hooks/useFetchMasonryAPR';
  
  import useCashPriceInEstimatedTWAP from '../../hooks/useCashPriceInEstimatedTWAP';
  import useTreasuryAllocationTimes from '../../hooks/useTreasuryAllocationTimes';
  import useTotalStakedOnMasonry from '../../hooks/useTotalStakedOnMasonry';
  import useClaimRewardCheck from '../../hooks/masonry/useClaimRewardCheck';
  import useWithdrawCheck from '../../hooks/masonry/useWithdrawCheck';
  import ProgressCountdown from './components/ProgressCountdown';
  import MasonryImage from '../../assets/img/masonry.png';
  import { createGlobalStyle } from 'styled-components';
  
  const BackgroundImage = createGlobalStyle`
    body, html {
      background: url(${MasonryImage}) no-repeat !important;
      background-size: cover !important;
    }
  `;
  
  const useStyles = makeStyles((theme) => ({
    gridItem: {
      height: '100%',
      [theme.breakpoints.up('md')]: {
        height: '90px',
      },
    },
  }));
  
  const Masonry = () => {
    const classes = useStyles();
    const { account } = useWallet();
    const { onRedeem } = useRedeemOnMasonry();
    const stakedBalance = useStakedBalanceOnMasonry();
    const currentEpoch = useCurrentEpoch();
    const cashStat = useCashPriceInEstimatedTWAP();
    const totalStaked = useTotalStakedOnMasonry();
    const masonryAPR = useFetchMasonryAPR();
    const canClaimReward = useClaimRewardCheck();
    const canWithdraw = useWithdrawCheck();
    const scalingFactor = useMemo(() => (cashStat ? Number(cashStat.priceInDollars).toFixed(4) : null), [cashStat]);
    const { to } = useTreasuryAllocationTimes();
  
    return (
      <Page>
        <BackgroundImage />
        {!!account ? (
          <>
            <Typography color="textPrimary" align="center" variant="h3" gutterBottom>
              Studio
            </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>
                      <Typography style={{ textAlign: 'center' }}>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>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>
                        VINYL Price<small>(TWAP)</small>
                      </Typography>
                      <Typography>{scalingFactor}</Typography>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12} md={2} lg={2} className={classes.gridItem}>
                  <Card className={classes.gridItem}>
                    <CardContent align="center">
                      <Typography>APR / Daily</Typography>
                      <Typography>{masonryAPR.toFixed(0)}% / {(masonryAPR.toFixed(2)/365).toFixed(2)}%</Typography>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12} md={2} lg={2}>
                  <Card className={classes.gridItem}>
                    <CardContent align="center">
                      <Typography>TRACKS 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">
                    The Studio only allocates VINYL when the TWAP is greater than 1.0 FTM.
                    {/* The Studio only allocates VINYL awards at the start of the epoch. Depositing TRACKS mid epoch will not get any rewards for that epoch, however will be locked in for the lump sum reward allocation at the start of the next epoch.  */}
                    <p></p> 
                    Staked TRACKS can be withdrawn after 4 epochs, 24 hrs, since deposit. Rewards can be claimed after 2 epochs, 12 hrs. Please note that upon claiming rewards the lock up withdrawal timer is reset. 
                  </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}
                  color="primary"
                  variant="contained"
                >
                  Claim and 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 Masonry;
  