const IMG_SOURCE = 'https://gfp-nnw0orriao.netdna-ssl.com/wp-content/uploads/2016/07/Bernese-Mountain-Dog-600x600.jpg';

class Slidable extends React.Component {
  constructor(props) {
    super();
    
    this.state = {
      /** {number} - The pixel height of the container. Or `null` to set the height to auto. */
      height: null,
      /**
       * {React.Children} - We now cycle through two children, children0 and children1, and
       * update the classname of their container based on which one is currently the previous
       * children. Initially, children0 is current and children1 is previous, which is null.
       * After the transition, we set our previous children position to null.
       */
      children0: props.children,
      children1: null,
      /** {number} - reference to the which children set are the previous children */
      previousChildrenPosition: 1,
      /**
        * {number} - The previous pixel height of the container, used to determine when to update.
        *    To minimize forced layouts, we saved the current height as the previous height after
        *    that height's animation.
        */
      prevHeight: 0,
      /** {boolean} - Whether or not the component is in the process of changing height. */
      transitioning: false
    };
  }

  componentWillReceiveProps(nextProps) {
    var newChildrenNumber = (this._arePreviousChildrenPositionOne()) ? 1 : 0,
        newPreviousChildrenPosition = (this._arePreviousChildrenPositionOne()) ? 0 : 1;

    if (this.props.updateTriggerCondition !== nextProps.updateTriggerCondition) {
      // if previous children is currently child number 2, replace it with new children
      // which would be `this.props` after update
      this.setState({
        [`children${newChildrenNumber}`]: nextProps.children,
        previousChildrenPosition: newPreviousChildrenPosition,
        prevHeight: ReactDOM.findDOMNode(this.refs.content).offsetHeight,
        transitioning: false
      });
    } else {
      // we have to update children props every time
      this.setState({
        [`children${newPreviousChildrenPosition}`]: nextProps.children
      });
    }
  }

  componentDidUpdate(prevProps) {
    var contentHeight;

    if (this.props.updateTriggerCondition !== prevProps.updateTriggerCondition) {
      window.requestAnimationFrame(() => {
        contentHeight = ReactDOM.findDOMNode(this.refs.content).offsetHeight;

        // first step in new animation: set height from 'auto' back to a number
        // so that we have a starting height.
        if (contentHeight !== this.state.prevHeight && !this.state.transitioning) {
          this.setState({
            height: this.state.prevHeight,
            transitioning: true
          }, () => {
            // we adjust height from old height (ie 0) to new height in next frame so that
            // the browser doesn't batch style changes--otherwise the animation wouldn't trigger
            window.requestAnimationFrame(() => {
              // use setTimeout because transitionend events fire inconsistently across browsers 🙁
              window.setTimeout(this.onTransitionEnd.bind(this), this.props.transitionDuration);
              this.setState({height: contentHeight})    
            });
          });
        }
      });
    }
  }

  /**
   * Called when the height transition ends on the container. It removes the
   * content from the DOM when the container is done sliding out, and sets
   * the height to 'auto' after the container is done sliding in.
   */
  onTransitionEnd() {
    var childrenNumberToRemove = (this._arePreviousChildrenPositionOne()) ? 1 : 0;

    this.setState({
      [`children${childrenNumberToRemove}`]: null,
      height: null
    });
  }

  _arePreviousChildrenPositionOne() {
    return this.state.previousChildrenPosition === 1;
  }
  
  render() {
    var contentStyle = {
          position: (this.state.height === null) ? 'relative' : 'absolute'
        },
        containerStyle = {
          height: (this.state.height === null) ? 'auto' : this.state.height,
          transition: `height ${this.props.transitionDuration}ms`
        };

    return (
      <div className='Slidable'>
        <div ref='container' style={containerStyle} className='slidable-container'>
          <div ref='content' style={contentStyle} className='slidable-content'>
            {/* treat each child set identically and only edit the classname for each */}
            <div className={!this._arePreviousChildrenPositionOne() ? 'previous-children' : ''}>
              {this.state.children0}
            </div>
            <div className={this._arePreviousChildrenPositionOne() ? 'previous-children' : ''}>
              {this.state.children1}
            </div>
          </div>
        </div>
      </div>
    );
  }
}


class SlidableDemo extends React.Component {
  constructor() {
    super();
    
    this.state = {drawerOpen: false};
  }
 
  onHeaderClick() {
    this.setState({drawerOpen: !this.state.drawerOpen});
  }
  
  render() {
    return (
      <div className='slidable-demo'>
        <header onClick={this.onHeaderClick.bind(this)}>
          <h1>Toggle me for a surprise!</h1>
        </header>
        <Slidable
          transitionDuration={400}
          updateTriggerCondition={this.state.drawerOpen}
        >
          {this.state.drawerOpen ? (
            <div className='drawer'>
              <h3>...it's PUPPIEEEEES!!!</h3>
              <p>
                We've added a bunch of dummy elements in the <strong>.other-things-on-the-page</strong> element below to mimic the real-world effects of doing a lot of work per frame.
              </p>
              <p>
                Here we are animating the <strong>height</strong> property, and we definitely aren't hitting 60fps :(. We know we can avoid layouts and paints when animating transforms, but how do we do that when opening a drawer of unknown height?
              </p>
              <ul>
                <li><img src={IMG_SOURCE} /></li>                
                <li><img src={IMG_SOURCE} /></li>                
                <li><img src={IMG_SOURCE} /></li>                
              </ul>
            </div>
          ) : null}
        </Slidable>
        <section className='other-things-on-the-page'>
          <img src={IMG_SOURCE} />
          {Array.apply(null, new Array(25000)).map(() => <div />)}
        </section>
      </div>
    )
  }
}

ReactDOM.render(<SlidableDemo />, document.querySelector('.burnese-mtn-dogs-container'));