text: /*
   * FeaturePage
   *
   * List all the features
   */
  import React, {useState, useEffect} from 'react';
  import { Helmet } from 'react-helmet';
  const table = {
    borderCollapse: 'collapse',
    borderStyle: 'hidden',
    textAlign: 'center'
  }
  const button = {
    cursor: 'pointer',
    backgroundColor: '#04AA6D',
    border: 'none',
    color: 'white',
    padding: 20,
    fontSize: 16,
    borderTopLeftRadius: 4,
    borderBottomLeftRadius: 4
  }
  const buttonDisabled = {
    backgroundColor: '#04AA6D',
    border: 'none',
    color: 'white',
    padding: 20,
    fontSize: 16,
    borderTopLeftRadius: 4,
    opacity: 0.5,
    borderBottomLeftRadius: 4
  }
  const button2 = {
    cursor: 'pointer',
    backgroundColor: '#04AA6D',
    border: 'none',
    color: 'white',
    padding: 20,
    fontSize: 16,
    borderTopRightRadius: 10,
    borderBottomRightRadius: 10
  }
  const button2Disabled = {
    backgroundColor: '#04AA6D',
    border: 'none',
    color: 'white',
    padding: 20,
    fontSize: 16,
    opacity: 0.5,
    borderTopRightRadius: 10,
    borderBottomRightRadius: 10
  }
  const button3 = {
    backgroundColor: '#04AA6D',
    border: 'none',
    color: 'white',
    padding: 20,
    fontSize: 16,
    borderRadius: 0
  }
  const button3Disabled = {
    backgroundColor: '#04AA6D',
    border: 'none',
    color: 'white',
    padding: 20,
    fontSize: 16,
    opacity: 0.5,
    borderRadius: 0
  }
  const td = {
    width: 200,
    paddingLeft: 10,
    paddingRight: 10,
    border: '1px solid silver'
  }
  export default function FeaturePage() {
    const [socketData, setSocketData] = useState(new Array())
    const [table1Visible, setTable1Visible] = useState(true)
    const [table2Visible, setTable2Visible] = useState(false)
  
    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
    function randomDate(start, end) {
      return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
    }
    function getRandomNumberBetween(min,max){
      return Math.floor(Math.random()*(max-min+1)+min);
    }
    function generateARow(selector) {
      if(selector === 1) {
        return {
          'expDate' :  randomDate(new Date(2012, 0, 1), new Date()),
          'atm': getRandomNumberBetween(0.00, 10.00),
          '25dRR': getRandomNumberBetween(-0.2, 2),
          '10dRR':  getRandomNumberBetween(-0.2, 2),
          '25dBF': getRandomNumberBetween(-0.2, 2),
          '10dBF': getRandomNumberBetween(-0.2, 2)
        }
      } else {
        return {
          'expDate' :  randomDate(new Date(2021, 0, 1), new Date()),
          'atm': getRandomNumberBetween(8.00, 59.00),
          '25dRR': getRandomNumberBetween(-8, 21),
          '10dRR':  getRandomNumberBetween(-3, 39),
          '25dBF': getRandomNumberBetween(-9, 58),
          '10dBF': getRandomNumberBetween(-4, 2)
        }
      }
    }
    function dataGenerator(selector) {
      var theArray = new Array();
      for(var i=0;i< 100;i++){
        theArray.push(generateARow(selector))
      }
      return theArray;
    }
    async function socketServerSimulation() {
      var loop = true
      while(loop) {
        await sleep(1000);
        if(table1Visible) {
          const theArray = dataGenerator(1)
          setSocketData(theArray)
        } else {
          const theArray = dataGenerator(2)
          setSocketData(theArray)
        }
      }
    }
    useEffect(() => {
      socketServerSimulation()
    });
    return (
      <div>
        <Helmet>
          <title>Single Currency Grid</title>
          <meta
            name="singleCurrencyGrid"
            content="Currency"
          />
        </Helmet>
        <div>
          <button style={table1Visible ? buttonDisabled : button} onClick={() => {
            setTable2Visible(false)
            setTable1Visible(true)
            setSocketData(new Array)
          }}>RR/BF Table</button>
          <button style={button3}>-</button>
          <button style={table2Visible ? button2Disabled : button2} onClick={() => {
            setTable2Visible(true)
            setTable1Visible(false)
            setSocketData(new Array)
          }}>Call/Put Table</button>
        </div>
        <div>
        <table style={table}> 
        <tbody>
        <tr>
          <th style={td}></th>
          <th style={td}>Exp Date</th>
          <th style={td}>ATM</th>
          <th style={td}>25d R/R</th>
          <th style={td}>10d R/R</th>
          <th style={td}>25d B/F</th>
          <th style={td}>10d B/F</th>
        </tr>
          {socketData.map((data) => (
           <tr>
             <td style={td}>1s</td>
             <td style={td}>{data.expDate.toLocaleDateString('en-US')}</td>
             <td style={td}>{data.atm}</td>
             <td style={td}>{data['25dRR']}</td>
             <td style={td}>{data['10dRR']}</td>
             <td style={td}>{data['25dBF']}</td>
             <td style={td}>{data['10dBF']}</td>
          </tr>
          ))}
          </tbody>
          </table>
        </div>
      </div>
    );
  }
  