import React from 'react';
import { connect } from 'react-redux';
import * as actions from './../state/priorities/actions';
import { TimelineLite } from 'gsap';

class GsapComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      style: {}
    }

    this.tl = new TimelineLite();
  }

  componentDidMount() {
    if (this.props.component === undefined) {
      // after the component mounts it should be added to the redux store
      this.props.addGsap(this.props.id);
    }
  }

  componentWillReceiveProps(nextProps) {
    // never called
    console.log(nextProps);
  }

  componentDidUpdate(prevProps, prevState) {
    // never called
    console.log('did update');
    console.log(this.props);
  }

  to = (options) => {
    // not relevant
  }

  render() {
    return (
      <div ref={ref => this.ref = ref} style={this.props.component !== undefined ? this.props.component.style : {}}>
        <div>
          {this.props.children}
        </div>
        <div>{JSON.stringify(this.props.component)}</div>
      </div>
    );
  }

}

const mapStateToProps = (state, ownProps) => {
  return {
    component: state.priorities.gsap[ownProps.id]
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    addGsap: (key) => dispatch(actions.addGsap(key)),
    updateGsap: (key, styles, next = {}) => dispatch(actions.updateGsap(key, styles, next))
  };
}

GsapComponent = connect(mapStateToProps, mapDispatchToProps)(GsapComponent);

export { GsapComponent };