import React, {useMemo} from 'react';
import {useWallet} from 'use-wallet';
import styled from 'styled-components';
import {createGlobalStyle} from 'styled-components';
import moment from 'moment';
import Label from '../../components/Label';
import {Box, Grid, Button, Typography, Card, CircularProgress, CardContent, Paper} from '@material-ui/core';
import ProgressCountdown from './ProgressCountdown';
import UnlockWallet from '../../components/UnlockWallet';
import TokenSymbol from '../../components/TokenSymbol';
import Page from '../../components/Page';
import DashboardInfoCard from '../../components/DashboardInfoCard';
import DashboardInfoCardNodes from './DashboardInfoCardNodes';
import HomeImage from '../../assets/img/fairybg.gif';
import useTreasuryAllocationTimes from '../../hooks/useTreasuryAllocationTimes';
import useBanks from '../../hooks/useBanks';
import useBank from '../../hooks/useBank';
import useHarvestAll from '../../hooks/useHarvestAll';
import useCompoundAll from '../../hooks/useCompoundAll';
import useUnicornStats from '../../hooks/useUnicornStats';
import useWingsStats from '../../hooks/useWingsStats';
import useWalletStats from '../../hooks/useWalletStats';
import CountUp from 'react-countup';
import {useMediaQuery} from '@material-ui/core';
import useTokenBalance from '../../hooks/useTokenBalance';
import {getDisplayBalance} from '../../utils/formatBalance';
import useUnicornFinance from '../../hooks/useUnicornFinance';
import unicornImg from '../../assets/img/unicorn.png';
import nodesImg from '../../assets/img/gnode.png';
import wingsImg from '../../assets/img/gshare.png';
import DashboardBoardroomCard from './DashboardBoardroomCard';

const BackgroundImage = createGlobalStyle`
  body {
    background: url(${HomeImage}) repeat !important;
    background-size: cover !important;
    // background: linear-gradient(90deg, rgba(144,17,105,1) 0%, rgba(95,17,144,1) 100%);
  }
`;

const Dashboard = () => {
  const {account} = useWallet();
  const unicornFinance = useUnicornFinance();

  const {to} = useTreasuryAllocationTimes();
  const [banks] = useBanks();
  const walletStats = useWalletStats(banks);
  const unicornStats = useUnicornStats();
  const wingsStats = useWingsStats();
  const fairylandPools = banks.filter(
    (bank) => (!bank.finished && bank.sectionInUI === 2) || bank.sectionInUI === 6 || bank.sectionInUI === 7,
  );
  // node dashboard enable here
  const nodePools = [useBank('UnicornNode'), useBank('LPNode'), useBank('LPWlrsNode')];
  // const onReward = useHarvestAll(fairylandPools);
  // const harvestNodes = useHarvestAll(nodePools);
  // const compoundNodes = useCompoundAll(nodePools);

  const unicornBalance = useTokenBalance(unicornFinance.UNICORN);
  const displayUnicornBalance = useMemo(() => getDisplayBalance(unicornBalance), [unicornBalance]);
  const wingsBalance = useTokenBalance(unicornFinance.WINGS);
  const displayWingsBalance = useMemo(() => getDisplayBalance(wingsBalance), [wingsBalance]);
  const magicbondBalance = useTokenBalance(unicornFinance.MAGICBOND);
  const displayMagicbondBalance = useMemo(() => getDisplayBalance(magicbondBalance), [magicbondBalance]);

  const unicornPriceInDollars = useMemo(
    () => (unicornStats ? Number(unicornStats.priceInDollars).toFixed(2) : null),
    [unicornStats],
  );
  const wingsPriceInDollars = useMemo(
    () => (wingsStats ? Number(wingsStats.priceInDollars).toFixed(2) : null),
    [wingsStats],
  );

  const matches = useMediaQuery('(min-width:900px)');
  const matches960 = useMediaQuery('(max-width:960px)');


  const [totalInvested, totalRewards, totalInFairyland, totalInNodes, totalInMagicroom] = useMemo(
    () =>
      walletStats
        ? [
            walletStats.total,
            walletStats.totalRewards,
            walletStats.totalInFairyland.toFixed(2),
            walletStats.totalInNodes.toFixed(2),
            walletStats.totalInMagicroom.toFixed(2),
          ]
        : [null, null, null, null],
    [walletStats],
  );

  const getTotalInvested = () => {
    return (
      totalInvested +
      Number(displayUnicornBalance) * Number(unicornPriceInDollars) +
      Number(displayWingsBalance) * Number(wingsPriceInDollars)
    );
  };

  return (
    <Page>
      <BackgroundImage />
      {!!account ? (
        <>
          <Typography color="textPrimary" align="center" variant="h3" gutterBottom>
            Dashboard
          </Typography>
          <Grid container spacing={3}>
            <Grid item xs={12} md={6} lg={6}>
              <Card style={{textAlign: 'center', minHeight: matches960 ? '0' : '232px'}}>
                <CardContent>
                  <Typography color="textPrimary" align="center" variant="h5" gutterBottom>
                    My Wallet
                  </Typography>{' '}
                  <Balances style={{display: 'flex', marginBottom: '0', marginTop: '20px'}}>
                    <StyledBalanceWrapper>
                      <TokenSymbol width={40} height={35} symbol="UNICORN" />
                      <StyledBalance>
                        <span className="wallet-token-blanace">{displayUnicornBalance}</span>
                        <Label text="UNICORN" />
                      </StyledBalance>
                    </StyledBalanceWrapper>

                    <StyledBalanceWrapper>
                      <TokenSymbol width={35} height={35} symbol="WINGS" />
                      <StyledBalance>
                      <span className="wallet-token-blanace">{displayWingsBalance}</span>
                        <Label text="WINGS" />
                      </StyledBalance>
                    </StyledBalanceWrapper>

                    <StyledBalanceWrapper>
                      <TokenSymbol width={40} height={35} symbol="MAGICBOND" />
                      <StyledBalance>
                      <span className="wallet-token-blanace">{displayMagicbondBalance}</span>
                        <Label text="MAGICBOND" />
                      </StyledBalance>
                    </StyledBalanceWrapper>
                  </Balances>
                </CardContent>
              </Card>
            </Grid>

            <Grid item xs={12} md={6} lg={6}>
              <Card style={{textAlign: 'center', minHeight: '190px'}}>
                <CardContent>
                  <Grid container direction="column" spacing={1}>
                    <Grid item>
                      <Grid container justifyContent="space-between">
                        <Grid item>
                          <Typography color="textPrimary" align="center" variant="h5">
                            My Total worth
                          </Typography>
                        </Grid>
                        <Grid item>
                          <Typography color="textPrimary" align="center" variant="h5" style={{fontWeight: 700}}>
                            {totalInvested != null ? (
                              <CountUp end={getTotalInvested()} separator="," prefix="≈$" />
                            ) : (
                              <CircularProgress size={22} color="inherit" />
                            )}
                          </Typography>
                        </Grid>
                      </Grid>
                    </Grid>
                    <Grid item>
                      <Grid container justifyContent="space-between" alignItems="baseline">
                        <Grid item>
                          <Typography color="textSecondary" align="center" variant="h6">
                            <img
                              src={unicornImg}
                              alt="Unicorn"
                              height={30}
                              style={{verticalAlign: 'text-bottom', marginRight: '10px'}}
                            />
                            Fairyland
                          </Typography>
                        </Grid>
                        <Grid item>
                          <Typography color="textPrimary" align="center" variant="h6" style={{fontWeight: 700}}>
                            {totalInFairyland ? (
                              <CountUp end={totalInFairyland} separator="," prefix="≈$" />
                            ) : (
                              <CircularProgress style={{marginLeft: '10px'}} size={22} color="inherit" />
                            )}
                          </Typography>
                        </Grid>
                      </Grid>
                    </Grid>
                    <Grid item>
                      <Grid container justifyContent="space-between" alignItems="baseline">
                        <Grid item>
                          <Typography color="textSecondary" align="center" variant="h6">
                            <img
                              src={nodesImg}
                              alt="Unicorn"
                              height={30}
                              style={{verticalAlign: 'text-bottom', marginRight: '10px'}}
                            />
                            Nodes (locked)
                          </Typography>
                        </Grid>
                        <Grid item>
                          <Typography color="textPrimary" align="center" variant="h6" style={{fontWeight: 700}}>
                            {totalInNodes != null ? (
                              <CountUp end={totalInNodes} separator="," prefix="≈$" />
                            ) : (
                              <CircularProgress size={22} color="inherit" />
                            )}
                          </Typography>
                        </Grid>
                      </Grid>
                    </Grid>
                    <Grid item>
                      <Grid container justifyContent="space-between" alignItems="baseline">
                        <Grid item>
                          <Typography color="textSecondary" align="center" variant="h6">
                            <img
                              src={wingsImg}
                              alt="Unicorn"
                              height={30}
                              style={{verticalAlign: 'text-bottom', marginRight: '10px'}}
                            />
                            Magicroom
                          </Typography>
                        </Grid>
                        <Grid item>
                          <Typography color="textPrimary" align="center" variant="h6" style={{fontWeight: 700}}>
                            {totalInMagicroom ? (
                              <CountUp end={Number(totalInMagicroom)} separator="," prefix="≈$" />
                            ) : (
                              <CircularProgress style={{marginLeft: '10px'}} size={22} color="inherit" />
                            )}
                          </Typography>
                        </Grid>
                      </Grid>
                    </Grid>
                    <Grid item>
                      <Grid container justifyContent="space-between" alignItems="baseline">
                        <Grid item>
                          <Typography color="textPrimary" align="center" variant="h5">
                            Rewards to claim
                          </Typography>{' '}
                        </Grid>
                        <Grid item>
                          <Typography color="textPrimary" align="center" variant="h5" style={{fontWeight: 700}}>
                            {totalRewards != null ? (
                              <CountUp end={Number(totalRewards)} separator="," prefix="≈$" />
                            ) : (
                              <CircularProgress size={22} color="inherit" />
                            )}
                          </Typography>
                        </Grid>
                      </Grid>
                    </Grid>
                  </Grid>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
          <Paper style={{marginTop: '30px', marginBottom: '10px', height: '3px'}}></Paper>
          <Grid container alignItems="center" style={{marginTop: '30px'}}>
            <Grid item xs={12} md={6} lg={6}>
              <Typography color="textPrimary" style={{textAlign: matches ? 'left' : 'center'}} variant="h4">
                Fairyland
              </Typography>
            </Grid>
            {/* <Grid item xs={12} md={6} lg={6} style={{textAlign: matches ? 'right' : 'center'}}>
              <Button style={{marginTop: matches ? '0' : '10px'}} className="shinyButton" onClick={onReward}>
                Claim All From Fairyland
              </Button>
            </Grid> */}
          </Grid>
          {/* <Typography color="textPrimary" style={{marginTop: '30px'}} variant="h5">
            Swapsicle pools
          </Typography>{' '}
          <Box mt={2}>
            <Grid container spacing={3}>
              {fairylandPools
                .filter((bank) => bank.sectionInUI === 6)
                .map((bank) => (
                  <React.Fragment key={bank.name}>
                    <DashboardInfoCard bank={bank} />
                  </React.Fragment>
                ))}
            </Grid>
          </Box> */}
          <Typography color="textPrimary" style={{marginTop: '30px'}} variant="h5">
            Wing Reward pools
          </Typography>{' '}
          <Box mt={2}>
            <Grid container spacing={3}>
              {fairylandPools
                .filter((bank) => bank.sectionInUI === 2)
                .map((bank) => (
                  <React.Fragment key={bank.name}>
                    <DashboardInfoCard bank={bank} />
                  </React.Fragment>
                ))}
            </Grid>
          </Box>
          {/* <Typography color="textPrimary" style={{marginTop: '30px'}} variant="h5">
            Single Stake pools
          </Typography>{' '}
          <Box mt={3}>
            <Grid container spacing={3}>
              {fairylandPools
                .filter((bank) => bank.sectionInUI === 7)
                .map((bank) => (
                  <React.Fragment key={bank.name}>
                    <DashboardInfoCard bank={bank} />
                  </React.Fragment>
                ))}
            </Grid>
          </Box> */}
          <Paper style={{marginTop: '40px', marginBottom: '10px', height: '3px'}}></Paper>
          {/* <Grid container alignItems="center" style={{marginTop: '30px'}}>
            <Grid item xs={12} md={6} lg={6}>
              <Typography color="textPrimary" style={{textAlign: matches ? 'left' : 'center'}} variant="h4">
                Nodes
              </Typography>{' '}
            </Grid>
            <Grid item xs={12} md={6} lg={6} style={{textAlign: matches ? 'right' : 'center'}}>
              <Button style={{marginTop: matches ? '0' : '10px'}} className="shinyButton" onClick={compoundNodes}>
                Compound All From Nodes
              </Button>
              <Button style={{marginTop: matches ? '0' : '10px', marginLeft: '10px'}} className="shinyButton" onClick={harvestNodes}>
                Claim All From Nodes
              </Button>
            </Grid>
          </Grid> */}
          {/* <Box mt={3}>
            <Grid container spacing={3}>
              {nodePools.map((bank) => (
                <React.Fragment key={bank.name}>
                  <DashboardInfoCardNodes bank={bank} />
                </React.Fragment>
              ))}
            </Grid>
          </Box> */}
          <Paper style={{marginTop: '40px', marginBottom: '40px', height: '3px'}}></Paper>
          <Typography color="textPrimary" style={{textAlign: matches ? 'left' : 'center'}} variant="h4">
            Magicroom
          </Typography>{' '}
          <Typography
            style={{
              marginTop: '20px',
              textTransform: 'uppercase',
              color: '#fff',
              textAlign: matches ? 'left' : 'center',
            }}
          >
            <b>Next Epoch: </b>
            <ProgressCountdown base={moment().toDate()} hideBar={true} deadline={to} description="Next Epoch" />
          </Typography>
          <Box mt={3}>
            <Grid container spacing={3}>
              <DashboardBoardroomCard />
            </Grid>
          </Box>
        </>
      ) : (
        <UnlockWallet />
      )}
    </Page>
  );
};

const StyledValue = styled.div`
  color: white;
  font-size: 30px;
  font-weight: 700;
`;

const StyledBalance = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
`;

const Balances = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: ${(props) => props.theme.spacing[4]}px;
`;

const StyledBalanceWrapper = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 ${(props) => props.theme.spacing[3]}px;
`;

export default Dashboard;