import React from 'react'
import PropTypes from 'prop-types';

import {AnimationView, Ticker} from '@avocado/timing'
class AnimationComponent extends React.Component

  @defaultProps:

    animation: null
    image: null

    isTicking: true

  constructor: (props) ->

    super props

    @animationView = new AnimationView()
    @animationView.on [
      'animationChanged'
      'imageChanged'
      'sourceRectangleChanged'
    ], @tickContainer

    @ticker = new Ticker.OutOfBand()
    @ticker.on 'tick', (elapsed) => @props.animation?.tick elapsed

  componentWillUnmount: ->

    @animationView.off [
      'animationChanged'
      'imageChanged'
      'sourceRectangleChanged'
    ], @tickContainer

    @ticker.off 'tick'
    @ticker.stop()

  render: ->

    # Side-effects.
    @animationView.setAnimation @props.animation
    @animationView.setImage @props.image

    @props.setIntoContainer @animationView

    return null

  tickContainer: => @props.tickContainer()

export default AnimationComponent