//ComboBox component

const coins = useSelector(state => state.search.allCoins)
const [reset, setReset] = useState(false)

const handleSearch = (e) => {
    const coinId = coins.filter(coin => {
      return (coin.name === e.target.innerHTML.trim())
    })

    if (coinId.length === 0) {
      return
    }
    setReset(!reset)
    history.push(`/coins/${coinId[0].id}`)
  }
  const handleEnter = (e) => {
    // console.log(e)
    if (e.key === 'Enter') {
      e.preventDefault()
      const results = coins.filter(coin => {
        return ((coin.name.toLowerCase().includes(e.target.value.toLowerCase().trim()))
          || (coin.symbol.toLowerCase().includes(e.target.value.toLowerCase().trim())))
      })
      const exactResults = results.filter(coin => {
        return ((coin.name.toLowerCase() === (e.target.value.toLowerCase().trim()))
          || (coin.symbol.toLowerCase() === e.target.value.toLowerCase().trim()))
      })

      setReset(!reset)

      if (results.length === 0) {
        history.push(`/404`)
      } else if (exactResults.length === 1) {
        history.push(`/coins/${exactResults[0].id}`)
      } else {
        dispatch(loadCurrentResults(results))
        history.push(`/results`)
      }
    }
  }

//getCoinDetail thunk

if (response.status >= 200 && response.status < 400) {
                const data = await response.json();
                data.chart_data = DataToCsv(data.chart_data)
                //new formatted data is dispatched to redux store
                dispatch(receiveCoinDetails(data))
            } else {
                console.error('Bad response');
            }

//util.js

function parseData2() {
	return function(d) {
        d.date = new Date(d.date)
        d.open = +d.open *100;
		d.high = +d.high *100;
		d.low = +d.low *100;
		d.close = +d.close *100;
		return d;
	};
}

//parsing the date to the correct format for the candlestickchart
export function DataToCsv(data){
	//extracting the correct data from the chart data json object fetched from the api
	const alteredFetchedData = data.map(marketData => {
		return {
		  date: new Date(marketData[0]) + ''.split('T')[0],
		  open: marketData[1],
		  high: marketData[2],
		  low: marketData[3],
		  close: marketData[4]
		}
	  })

	//creating fields for csv data format
	const fields2 = ["date", "high","low", "open", "close"]
	//creating a new instance of csv data with the formatted fields
	const json2csvParser2 = new Parser({fields2})
	const csv2 = json2csvParser2.parse(alteredFetchedData)
	//returning the csv data into formatted objects the chart can use for data inputs
	return csvParse(csv2, parseData2())

}

useEffect(() => {
   const getPurchaseQty = () => {
      const foundPurchases = purchases.filter(purchase => purchase.tickerSymbol === symbol)
      if (foundPurchases.length > 0) {
            const totalQtyOfPurchase = foundPurchases.reduce((acc, curr) => {
               return acc + curr.purchaseQuantity
            }, 0)

            //return qty with 1 decimal place
            setQtyOfPurchase(Number((totalQtyOfPurchase).toFixed(1)))
      } else {
            setQtyOfPurchase(0)
      }
   }
   return getPurchaseQty()
}, [symbol, purchases])

<DialogActions>
   {/* disable buy button if there is no money in the bank or if the user doen't have enough money to buy atleast qty of 1 */}
   {bank == 0 || maxQtyToPurchase === 0 ?
   <Button onClick={buy} disabled={true} color="primary">
   Buy
   </Button>:
   <Button onClick={buy} color="primary">
   Buy
   </Button>}

   {/*disable sell button if purchase qty is 0 */}
   {qtyOfPurchase > 0 ? <Button onClick={sell} color="primary" autoFocus>
      Sell
      </Button> :
      <Button onClick={sell} disabled={true} color="primary" autoFocus>
            Sell
      </Button>}
</DialogActions>

// DisplayLists component

const userLists = useSelector(state => state.list.lists);
  const id = useSelector(state=> state.session.id)
  const history = useHistory();


const handleClick = (e) => {
    e.preventDefault();
    const test = escape(e.target.id)
    console.log(test)    // console.log(e.target.id)
    history.push(`/list/${test}`);
  }

  const handleDelete = (e) => {
    e.stopPropagation()
    const listName = e.target.id.split("-")[1]
    console.log(listName)
    dispatch(thunks.deleteListThunk(id, listName))
  }

  return (
    <>
      <Paper className={classes.sideCard} style={{ overflowY: 'scroll' }} elevation={3}>
        <Typography variant="h5">Lists</Typography>
        <Divider style={{marginBottom: 0}} className={classes.divider} />
        <div className={classes.spacer}>
          <Typography variant="subtitle2">
            {userLists ? userLists.map(list => (
               <>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center'}} className='list-div' key={list[0]} id={list[0]} onClick={handleClick}>
                  <span style={{marginLeft: '35%'}}>{list[0]}</span>
                  <RemoveIcon onClick={handleDelete} style={{float:"right"}} id={`list-${list[0]}`} />
                  </div>
                     <Divider style={{margin: 0}} className={classes.divider} />
               </>
                     ))
                        : null}
          </Typography>
          <ListModal style={{ position: 'absolute', marginTop: "30" }} />
        </div>
      </Paper>
    </>
  )
}

 const XSRFTOKEN = await fetch('/api/users/get_csrf')
  const token = (await XSRFTOKEN.json())

  const res = await fetch('/api/users/logout', {
    method: "POST",
    headers: {
      'X-CSRFToken': token.csrfT
    },
  });