text: import React from 'react';
  import {useWallet} from 'use-wallet';
  import {Route, Switch, useRouteMatch} from 'react-router-dom';
  import Bank from '../Bank';
  
  import {Box, Container, Typography, Grid} from '@material-ui/core';
  
  import {Alert} from '@material-ui/lab';
  
  import UnlockWallet from '../../components/UnlockWallet';
  import Page from '../../components/Page';
  import FarmCard from './FarmCard';
  import {createGlobalStyle} from 'styled-components';
  
  import useBanks from '../../hooks/useBanks';
  import LaunchCountdown from '../../components/LaunchCountdown';
  import HomeImage from '../../assets/img/background.jpg';
  const BackgroundImage = createGlobalStyle`
    body {
      background: url(${HomeImage}) repeat !important;
      background-size: cover !important;
      background-color: #171923;
    }
  `;
  
  const Farm = () => {
    const [banks] = useBanks();
    const {path} = useRouteMatch();
    const {account} = useWallet();
    const activeBanks = banks.filter((bank) => !bank.finished);
    
    return (
      <Switch>
        <Page>
          <Route exact path={path}>
            <BackgroundImage />
            {!!account ? (
              <Container maxWidth="lg">
                <h2 style={{ fontSize: '80px', textAlign:'center' }}>Vineyard</h2>             
                
                <Box mt={5}>
                
                  <div hidden={activeBanks.filter((bank) => bank.sectionInUI === 2).length === 0}>
                  <Typography color="textPrimary" variant="h4" gutterBottom style={{marginTop: '20px', color: '#fff'}}>
                      WINE Reward Farms
                    </Typography>
                    <Alert variant="filled" severity="warning">
                      Follow the <a href="http://grapefinance.app/strategies" >Strategies guide here</a>. Sticking to the current strategy helps support the protocol which in turn helps you to continue to earn rewards!
                    </Alert>
                    <Grid container spacing={3} style={{marginTop: '20px'}}>
                      {activeBanks
                        .filter((bank) => bank.sectionInUI === 2)
                        .map((bank) => (
                          <React.Fragment key={bank.name}>
                            <FarmCard bank={bank} />
                          </React.Fragment>
                        ))}
                        </Grid>
                  </div>
  
                  <div hidden={activeBanks.filter((bank) => bank.sectionInUI === 1).length === 0}>
                    <Typography color="textPrimary" variant="h4" gutterBottom style={{marginTop: '100px', color: '#fff'}}>
                      Grape Reward Farms (Finished)
                    </Typography>
                    <Alert variant="filled" severity="warning">             
                       
                        GRAPE rewards have finished please unstake from these pools.
                    
                    </Alert>
                    <Grid container spacing={3} style={{marginTop: '20px', display: 'flex', alignItems: 'center'}}>
                      {activeBanks
                        .filter((bank) => bank.sectionInUI === 1)
                        .map((bank) => (
                          <React.Fragment key={bank.name}>
                            <FarmCard bank={bank} />
                          </React.Fragment>
                        ))}
                    </Grid>
                  </div>
  
                  <Grid hidden={activeBanks.filter((bank) => bank.sectionInUI === 0).length === 0}>
                    
                    <Typography color="textPrimary" variant="h4" gutterBottom style={{marginTop: '20px', color: '#fff'}}>
                      Genesis Pools (Finished)
                    </Typography>
                    <Alert variant="filled" severity="warning">
                      Please remove funds from genesis farms below.
                    </Alert>
                    {/*<Alert variant="filled" severity="warning">
                      Genesis pools have ended. Please claim all rewards and remove funds from Genesis pools.
                        </Alert>*/}
                    <Grid container spacing={3} style={{marginTop: '20px'}}>
                      {activeBanks
                        .filter((bank) => bank.sectionInUI === 0)
                        .map((bank) => (
                          <React.Fragment key={bank.name}>
                            <FarmCard bank={bank} />
                          </React.Fragment>
                        ))}
                    </Grid>
                  </Grid>
                </Box>
              </Container>
            ) : (
              <UnlockWallet />
            )}
          </Route>
          <Route path={`${path}/:bankId`}>
            <BackgroundImage />
            <Bank />
          </Route>
        </Page>
      </Switch>
    );
  };
  
  export default Farm;
  