import React, { PropTypes } from 'react'

// -- helper functions --

// currentEstimatedHeight returns the estimated block height for the current time.
const currentEstimatedHeight = () => {
	const knownBlockHeight = 98149
	const knownBlockTime = new Date('March 31, 2017 23:30:30 UTC')
	const blockTime = 9 //minutes
	const diffMinutes = Math.abs(new Date() - knownBlockTime) / 1000 / 60 / 60

	const estimatedHeight = knownBlockHeight + (diffMinutes / blockTime)

	return Math.floor(estimatedHeight + 0.5) // round to the nearest block
}

// estimatedProgress returns the estimated sync progress given the current
// blockheight, as a number from 0 -> 99
const estimatedProgress = (currentHeight) =>
	Math.min(currentHeight / currentEstimatedHeight() * 100, 99)

// -- components --

const StatusBar = ({synced, blockheight, peers}) => {

	const redColor = '#E0000B'
	const greenColor = '#00CBA0'
	const yellowColor = '#E7D414'

	const syncStyle = {
		color: redColor,
	}

	const syncProgressStyle = {
		width: estimatedProgress(blockheight).toString() + '%',
		height: '20px',
		transition: 'width 200ms',
		backgroundColor: '#00CBA0',
		margin: '0',
	}

	const syncProgressContainerStyle = {
		display: 'inline-block',
		backgroundColor: '#eee',
		height: '20px',
		width: '150px',
	}

	const syncProgressInfoStyle = {
		display: 'inline-block',
		position: 'absolute',
		fontSize: '12px',
		height: '25px',
		marginTop: '5px',
	}

	let status
	if (!synced && peers === 0) {
		syncStyle.color = redColor
		status = 'Not Synchronizing'
	} else if (!synced && peers > 0) {
		syncStyle.color = yellowColor
		status = 'Synchronizing'
	} else if (synced && peers === 0) {
		syncStyle.color = redColor
		status = 'No Peers'
	} else if (synced) {
		syncStyle.color = greenColor
		status = 'Synchronized'
	}

	let syncStatus = (
		<div className="status-bar-blockheight">Block Height: {blockheight}</div>
	)

	if (!synced) {
		syncStatus = (
			<div>
				<div style={syncProgressContainerStyle}>
					<div style={syncProgressStyle} />
				</div>
				<div style={syncProgressInfoStyle}>
					{Math.floor(estimatedProgress(blockheight))}%
				</div>
			</div>
		)
	}

	return (
		<div className="status-bar">
			<div style={syncStyle}>
				<i className="fa fa-globe fa-2x" />
				{status}
			</div>
			{syncStatus}
		</div>
	)
}

StatusBar.propTypes = {
	synced: PropTypes.bool.isRequired,
	blockheight: PropTypes.number.isRequired,
	peers: PropTypes.number.isRequired,
}

export default StatusBar


@@ -385,14 +385,9 @@
 / 60
- / 60
 %0A
+
 %0A%09co
@@ -644,16 +644,19 @@
  0 -%3E 99
+.99
 %0Aconst e
@@ -751,16 +751,19 @@
  * 100, 
+99.
 99)%0A%0A// 
@@ -835,16 +835,66 @@
 ) =%3E %7B%0A%0A
+%09const progress = estimatedProgress(blockheight)%0A%0A
 %09const r
@@ -1061,38 +1061,16 @@
 th: 
-estimatedProgress(blockheight)
+progress
 .toS
@@ -2114,49 +2114,26 @@
 %09%09%09%7B
-Math.floor(estimatedProgress(blockheight)
+progress.toFixed(2
 )%7D%25%0A

fix progress estimation algorithm, show two decimals of progress