class AnimationExample extends React.Component {
  constructor() {
    super();
    this.play = this.play.bind(this);
  }
  
  play() {
    if (!this.animationComponent) return;
    
    this.animationComponent.play();
  }
  
  render() {
    return (
      <div className="container">
        <AnimationComponent
          ref={(r)=> {if(r) this.animationComponent = r}}
        />
        <button type='button'
          onClick={this.play}
          >Play</button>
      </div>
    );
  }
}

class AnimationComponent extends React.Component {
  constructor() {
    super();
    this.elementRefs = [];
    this.player = null;
  }
  
  play() {
    if (!this.player) return;
    
    if (this.player.playState === 'running') {
      this.player.finish();
    }
    
    this.player.play();
  }
  
  _generateExpandEffect(el, index, array) {
    const endX = Math.round( 80 * Math.cos(index * 2 * Math.PI/array.length));
    const endY = Math.round( 80 * Math.sin(index * 2 * Math.PI/array.length));
    const keyframes = [
      {transform: 'translate(0,0)'}, 
      {transform: `translate(${endX}px, ${endY}px)`}
    ];

    const timing = {
      duration: 250, 
      fill: 'forwards', 
    };
    
    return new KeyframeEffect(el, keyframes, timing);
  }
  
  _generateCollapseEffect(el, index, array) {
    const endX = Math.round( 80 * Math.cos(index * 2 * Math.PI/array.length));
    const endY = Math.round( 80 * Math.sin(index * 2 * Math.PI/array.length));
    const keyframes = [ 
      {transform: `translate(${endX}px, ${endY}px)`},
      {transform: 'translate(0,0)'}
    ];

    const timing = {
      duration: 250, 
      fill: 'forwards', 
    };
    
    return new KeyframeEffect(el, keyframes, timing);
  }
  
  _generateFadeInEffect(el, index) {
    const keyframes = [
      {opacity: 0},
      {opacity: 1}
    ];
    
    const timing = {
      duration: 50,
      fill: 'forwards'
    };
    
    return new KeyframeEffect(el, keyframes, timing);
  }
  
  _generateFadeOutEffect(el, index) {
    const keyframes = [
      {opacity: 1},
      {opacity: 0}
    ];
    
    const timing = {
      duration: 50,
      fill: 'forwards'
    };
    
    return new KeyframeEffect(el, keyframes, timing);
  }
  
  _generateAnimatedElements(quantity) {
    quantity = (typeof quantity === 'number' && quantity >= 0) ? +quantity : 0;
    const animatedElements = [];
    for (let i = 0; i < quantity; i++) {
      animatedElements.push(
        <div className='Animation-element'
          ref={(r) => this.elementRefs.push(r)}>
        </div>
      );
    }
    return animatedElements;
  }
  
  componentDidMount() {
    const expandEffects = this.elementRefs.map(this._generateExpandEffect);
    const collapseEffects = this.elementRefs.map(this._generateCollapseEffect);
    const fadeInEffects = this.elementRefs.map(this._generateFadeInEffect);
    const fadeOutEffects = this.elementRefs.map(this._generateFadeOutEffect);
    
    // any of these can be changed to Sequence or Group effects
    const expandGroup = new GroupEffect(expandEffects);
    const collapseGroup = new GroupEffect(collapseEffects);
    const fadeOutGroup = new SequenceEffect(fadeOutEffects);
    const fadeInGroup = new SequenceEffect(fadeInEffects);
    const animationSequence = new SequenceEffect([
      expandGroup, 
      fadeOutGroup, 
      fadeInGroup,
      collapseGroup
    ]);

    this.player = new Animation(animationSequence, document.timeline);
  }
  
  render() {
    const animatedElements = this._generateAnimatedElements(11);
    return (
      <div className="Animation-anchor">
        { animatedElements }
      </div>
    );
  }
}

ReactDOM.render(<AnimationExample />, document.getElementById('app'));