class Sprite extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    TweenMax.set(this.refs.sprite, {
      backgroundColor: this.props.color,
      x: Math.cos(this.props.angle) * this.props.length,
      y: Math.sin(this.props.angle) * this.props.length,
      width: this.props.dimensions,
      height: this.props.dimensions,
      xPercent: -50,
      yPercent: -50,
      visibility: 'hidden',
      force3D: true
    })

    this.buildTimeline()
  }
  
  getRandom(min, max) {
    return min + Math.random() * (max - min);
  }
  
  buildTimeline() {
    const halfDuration = this.props.duration / 2
    const rotationX = this.getRandom(720, 1440)
    const rotationZ = this.getRandom(720, 1440)
    const velocity = (100 + Math.random() * 250) * this.props.speed
    const gravity = 800 * this.props.gravity
    const angle = this.props.angle * 180 / Math.PI
    const friction = this.getRandom(0.1, 0.15)
    
    this.props.timeline.to(this.refs.sprite, halfDuration, {
      opacity: 0,
      ease: RoughEase.ease.config({
        points: 20,
        strength: 1.75,
        clamp: true
      })
    }, 0).to(this.refs.sprite, this.props.duration, {
      visibility: 'visible',
      rotationX: `-=${rotationX}`,
      rotationZ: `+=${rotationZ}`,
      physics2D: {
        angle, // translate radians to degrees
        velocity, // initial velocity
        gravity,
        friction
      }
    }, 0).to(this.refs.sprite, 1.25 + Math.random(), {
      opacity: 0
    }, halfDuration)
  }

  render() {
    return (
      <div ref="sprite" className="sprite"></div>
    )
  }
}

Sprite.propTypes = {
  dimensions: React.PropTypes.number,
  color: React.PropTypes.string,
  angle: React.PropTypes.number,
  length: React.PropTypes.number,
  duration: React.PropTypes.number,
  speed: React.PropTypes.number,
  gravity: React.PropTypes.number
}

Sprite.defaultProps = {
  dimensions: 5,
  color: '',
  angle: 0,
  length: 0,
  duration: 0,
  speed: 2,
  gravity: 1
}

class SpriteContainer extends React.Component {
  constructor(props) {
    super(props)
    
    this.timeline = new TimelineMax({
      paused: true
    })
  }
  
  getRandom(min, max) {
    return min + Math.random() * (max - min);
  }

  getDimensions() {
    return this.getRandom(this.props.spriteSizes.min, this.props.spriteSizes.max)
  }

  getColor() {
    const r = this.getRandom(30, 255)
    const g = this.getRandom(30, 230)
    const b = this.getRandom(30, 230)

    return `rgb(${r}, ${g}, ${b})`
  }
  
  setPosition(bounds) {
    TweenLite.set(this.refs.container, {
      x: bounds.left + bounds.width / 2,
      y: bounds.top + bounds.height / 2
    })
  }
  
  playAnimation() {
    this.timeline.restart()
  }

  render() {    
    let sprites = []
    let dimensions
    let angle
    let length
    let duration
    let color
    let i
    
    for (i = 0; i < this.props.spriteCount; i++) {
      dimensions = this.getDimensions()
      angle = this.getRandom(0.65, 0.85) * Math.PI * 2
      length = Math.random() * (this.props.emitterSize / 2 - dimensions / 2)
      duration = 3 + Math.random()
      color = this.getColor()
      sprites.push(<Sprite key={`sprite${i}`} dimensions={dimensions} angle={angle} length={length} color={color} duration={duration} timeline={this.timeline} speed={this.props.speed} gravity={this.props.gravity} />)
    }
    
    return (
      <div ref="container" className="sprite-container">
        {sprites.map(sprite => sprite)}
      </div>
    )
  }
}

SpriteContainer.propTypes = {
  spriteCount: React.PropTypes.number,
  emitterSize: React.PropTypes.number,
  spriteSizes: React.PropTypes.object,
  speed: React.PropTypes.number,
  gravity: React.PropTypes.number
}

SpriteContainer.defaultProps = {
  spriteCount: 40,
  emitterSize: 20,
  spriteSizes: {
    min: 6,
    max: 8
  },
  speed: 2,
  gravity: 1
}

class Explosion extends React.Component {
  constructor(props) {
    super(props)

    this.spriteContainers = this.createSprites()
  }
  
  createSprites() {
    const containers = []
    let container
    let i

    for (i = 0; i < this.props.explosionCount; i++) {
      container = <SpriteContainer key={`explosion${i}`} ref={`explosion${i}`} spriteCount={this.props.spriteCount} spriteSizes={this.props.spriteSizes} emitterSize={this.props.size} speed={this.props.speed} gravity={this.props.gravity} />
      containers.push(container)
    }

    return containers
  }
  
  explode(delay) {
    let intervalCount = 0
    let bounds
    
    const interval = setInterval(() => {
      if (intervalCount < this.props.explosionCount) {
        bounds = this.refs.emitter.getBoundingClientRect()
        
        this.refs[`explosion${intervalCount}`].setPosition(bounds)
        this.refs[`explosion${intervalCount}`].playAnimation()
        
        intervalCount++;
      } else {
        clearInterval(interval);
      }
    }, delay)
  }

  render() {
    return (
      <div className="explosion-wrapper">
        <div ref="emitter" className="emitter"></div>
        {this.spriteContainers.map(container => container)}
      </div>
    )
  }
}

Explosion.propTypes = {
  size: React.PropTypes.number,
  explosionCount: React.PropTypes.number,
  spriteCount: React.PropTypes.number,
  spriteSizes: React.PropTypes.object,
  speed: React.PropTypes.number,
  gravity: React.PropTypes.number
}

Explosion.defaultProps = {
  size: 20,
  explosionCount: 5,
  spriteCount: 40,
  spriteSizes: {
    min: 6,
    max: 8
  },
  speed: 2,
  gravity: 1
}

class Wrapper extends React.Component {
  constructor(props) {
    super(props)
    
    // bind the click event
    this.testExplosion = this.testExplosion.bind(this)
  }

  testExplosion() {
    this.refs.explosion.explode(250)
  }

  render() {
    return (
      <div className="wrapper">
        <div className="explode-button" onClick={this.testExplosion}>Explode</div>
        <Explosion ref="explosion" size={20} explosionCount={5} spriteCount={40} spriteSizes={{min: 6, max: 8}} speed={2.4} gravity={0.7} />
      </div>
    )
  }
}

ReactDOM.render((
  <Wrapper />
), document.querySelector('#app-entry'))