import React from 'react'
import PropTypes from 'prop-types'
import { commaFormatted, currencyFormatted } from 'utils/utils'
import DashboardPopover from '../Dashboard/DashboardPopover'
import RaisedButton from 'material-ui/RaisedButton'
import {
  goToInviteFriends
} from 'navigation/navigation'
import Sparkle from 'react-sparkle'

import appTheme, {
  dashboardIconActiveColor,
  dashboardIconInactiveColor
} from 'theme/default'

class MoneyRaised extends React.Component {
  constructor (props) {
    super(props)
    this.timer = 0
    this.state = {
      amountDonated: 0,
      hovering: false,
      open: false
    }
  }

  incrementAmount () {
    var latestAmountRaised = this.state.amountDonated
    var newAmountRaisedRounded = +(latestAmountRaised + 0.01).toFixed(2)
    this.setState({
      amountDonated: newAmountRaisedRounded
    })
  }

  componentDidMount () {
    this.setCounter(this.props.app)
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.app && nextProps.app) {
      this.setCounter(nextProps.app)
    }
  }

  setCounter (app) {
    if (!app) { return }

    const secondsInDay = 864
      // Recalculate based on time that elapsed since the base amount.
    const moneyRaised = app.moneyRaised
    const dollarsPerDayRate = app.dollarsPerDayRate
    const secondsPerPenny = secondsInDay / (dollarsPerDayRate)

    this.setState({
      amountDonated: moneyRaised
    })

    if (!(secondsPerPenny <= 0)) {
      var millisecondsPerPenny = Math.round(Math.abs(secondsPerPenny) * 1000)
      this.timer = setInterval(this.incrementAmount.bind(this), millisecondsPerPenny)
    }
  }

  componentWillUnmount () {
    clearInterval(this.timer)
  }

  onHover (hovering) {
    this.setState({
      hover: hovering
    })
  }

  onClick (event) {
    this.setState({
      open: !this.state.open,
      anchorEl: event.currentTarget
    })
  }

  handlePopoverRequestClose () {
    this.setState({
      open: false
    })
  }

  render () {
    if (!this.props.app) { return null }

    // TODO: prop
    const celebrateMilestone = true
    const milestoneMoneyRaisedColor = '#FFEBA2'
    // const milestoneMoneyRaisedColor = '#FFE0B1'
    // const milestoneMoneyRaisedColor = '#FFFF8B'
    // const milestoneMoneyRaisedColor = '#FFF1AB'

    const containerStyle = {
      position: 'relative',
      userSelect: 'none',
      cursor: 'default'
    }
    const popoverStyle = {
      width: 180
    }
    const buttonContainerStyle = {
      textAlign: 'center'
    }
    const textStyle = Object.assign({}, {
      color: (
        celebrateMilestone
        ? milestoneMoneyRaisedColor
        : (
          this.state.hover
          ? dashboardIconActiveColor
          : dashboardIconInactiveColor
        )
      ),
      transition: 'color 300ms ease-in',
      cursor: 'pointer',
      fontSize: 18,
      fontFamily: appTheme.fontFamily,
      fontWeight: 'normal'
    }, this.props.style)

    const moneyRaised = this.state.amountDonated
    var amountDonated = '$' + commaFormatted(currencyFormatted(moneyRaised))

    return (
      <div
        onClick={this.onClick.bind(this)}
        onMouseEnter={this.onHover.bind(this, true)}
        onMouseLeave={this.onHover.bind(this, false)}
        style={containerStyle}>
        <span
          style={textStyle}>{amountDonated}</span>
        <Sparkle
          color={milestoneMoneyRaisedColor}
          count={18}
          fadeOutSpeed={40}
          overflowPx={14}
          flicker={false}
          />
        <DashboardPopover
          style={popoverStyle}
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          onRequestClose={this.handlePopoverRequestClose.bind(this)}>
          <div style={{ padding: 10, paddingTop: 0 }}>
            <p>This is how much money Tabbers have raised for charity.</p>
            <p>Recruit your friends to raise more!</p>
            <div style={buttonContainerStyle}>
              <RaisedButton
                label='Invite Friends'
                primary
                onClick={goToInviteFriends}
                labelStyle={{
                  fontSize: 13
                }}
              />
            </div>
          </div>
        </DashboardPopover>
      </div>
    )
  }
}

MoneyRaised.propTypes = {
  app: PropTypes.shape({
    moneyRaised: PropTypes.number.isRequired,
    dollarsPerDayRate: PropTypes.number.isRequired
  }),
  style: PropTypes.object
}

MoneyRaised.defaultProps = {
  style: {}
}

export default MoneyRaised

@@ -1974,89 +1974,95 @@
 %0A%0A  
-render () %7B%0A    if (!this.props.app) %7B return null %7D%0A%0A    // TODO: prop%0A    const
+// Returns boolean, whether we're drawing attention to the current%0A  // amount raised%0A 
  cel
@@ -2058,33 +2058,35 @@
 aised%0A  celebrat
-e
+ing
 Milestone = true
@@ -2083,14 +2083,12 @@
 one 
-= true
+() %7B
 %0A   
@@ -2107,43 +2107,23 @@
 tone
-MoneyRaisedColor = '#FFEBA2'
+Start = 5e5
 %0A   
- //
  con
@@ -2138,94 +2138,261 @@
 tone
-MoneyRaisedColor = '#FFE0B1'%0A    // const milestoneMoneyRaisedColor = '#FFFF8B'
+End = 5.03e5%0A    return (%0A      this.state.amountDonated %3E= milestoneStart &&%0A      this.state.amountDonated %3C milestoneEnd%0A    )%0A  %7D%0A%0A  render () %7B%0A    if (!this.props.app) %7B return null %7D%0A%0A    const celebrateMilestone = this.celebratingMilestone()
 %0A   
- //
  con
@@ -2430,12 +2430,12 @@
 '#FF
-F1AB
+EBA2
 '%0A%0A 
@@ -3492,16 +3492,51 @@
 %3C/span%3E%0A
+        %7B celebrateMilestone ? (%0A  
         
@@ -3544,16 +3544,18 @@
 Sparkle%0A
+  
         
@@ -3600,16 +3600,18 @@
         
+ 
+ 
 count=%7B1
@@ -3613,16 +3613,18 @@
 nt=%7B18%7D%0A
+  
         
@@ -3643,16 +3643,18 @@
 ed=%7B40%7D%0A
+  
         
@@ -3681,16 +3681,18 @@
         
+  
 flicker=
@@ -3701,34 +3701,75 @@
 alse%7D%0A          
-/%3E
+  /%3E%0A          )%0A          : null%0A        %7D
 %0A        %3CDashbo

Add logic for when to celebrate the milestone