// a menu button which, when clicked, reveals other buttons surrounding it
class Menu360 extends React.Component {
  constructor() {
    super();
    /*
     I think this should come from props, but for this demo I'm just hard coding it These strings are fa icon names, try adding or removing from this list. 
    */
    this.buttonIcons = [
      'facebook', 
      'twitter', 
      'linkedin', 
      'github', 
      'codepen', 
      'reddit', 
      'youtube', 
      // 'pinterest', 
      // 'google-plus'
    ];
    
    this.menuButtonRefs = [];   
    this._toggleMenu = this._toggleMenu.bind(this);
  }
  
  _toggleMenu() {
    if (!this.player) return;
    this.player.reverse();
  }
  
  _generateButtonEffect(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));
      let keyframes = [
        {transform: 'translate(0,0)'}, 
        {transform: `translate(${endX}px, ${endY}px)`}
      ];

      let timing = {
        duration: 150,
        fill: 'forwards', 
        easing: 'ease-in-out',
      };
      return new KeyframeEffect(el, keyframes, timing);
  }
  
  componentDidMount() {
    let effects = this.menuButtonRefs.map(this._generateButtonEffect);
    /*
     SequenceEffect crashes chrome when reversed
    */
    const sequenceEffect = new SequenceEffect(effects);
    this.player = new Animation(sequenceEffect, document.timeline);
    /*
     Initializing the animation to be reversed but finished. This allows the animation to toggle with only additional calls to player.reverse(). There should probably be more robust state handling, but...LOL
    */
    this.player.reverse();
    this.player.currentTime = 0;
  }

  render() {
    return (
      <div className="Menu360-container">
        {this.buttonIcons.map( (iconName, index) => {
          let classes = `fa fa-${iconName}`;
          return (
            <button key={iconName}
              ref={(r) => this.menuButtonRefs[index] = r }
              className="Menu360-button"
              >
              <i className={classes}/>
            </button>
          );
        })}
        <button className="Menu360-toggle" onClick={this._toggleMenu}>
          <i className="fa fa-bars"/>
        </button>
      </div>
    )
  }
}

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